CODEWITHSUNDEEP
jquery
Viktor
Viktor

Reputation: 1046

how to take next element with specific class

I'm making simple slider, and i have a problem with removing class of previous item. I need to remove class active from previous ".modal-body img". How can i do it correctly? Right now its not switching to next image. Any other suggestion on code improving is appreciated.

HTML:

<div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" ><img src="images/portfolio/portfolio_1.png" alt="" ></a>

                    <div class="modal fade" aria-labelledby="myModalLabel">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/portfolio_1.png" alt="">
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

                <div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/office_2.jpg" alt="" ></a>

                    <div class="modal fade" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/office_2.jpg" alt="" >
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

                <div class="col-md-4 col-sm-6">
                    <a href="#" data-toggle="modal" data-target="#myModal"><img src="images/portfolio/office_3.jpeg" alt="" ></a>

                    <div class="modal fade"arial-labelledby="myModalLabel">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Title</h4>
                      </div>
                      <div class="modal-body">
                        <img src="images/portfolio/office_3.jpeg" alt="" >
                        <span class="arrow prev"></span>
                        <span class="arrow next"></span>
                      </div>
                    </div>
                  </div>
                </div>

                </div>

Jquery:

    var next = $(".next");
    var prev = $(".prev");
    var item = $('.modal-body > img');
    item.first().addClass("active");

    next.click(function(){
        var index = item.filter(".active").index();
        item.eq(index+1).addClass("active").item(index).removeClass("active");
    });

Upvotes: 0

Views: 39

Answers (1)

gauravmuk
gauravmuk

Reputation: 1616

next.click(function(){
        var item = $('.modal-body > img');
        var index = +$('.modal-body > img').index($('.modal-body > img.active'));
        index = (item.length - 1 === index) ? 0 : index + 1;
        item.removeClass('active');
        item.eq(index).addClass("active");
    });

First we get the index by finding the active element. Then, we check the corner condition when the index is at the element. We can remove class active from all items and add only on desired item.

Upvotes: 1

Related Questions