CODEWITHSUNDEEP
jquery
Jandon
Jandon

Reputation: 625

Add class to prev and next element of current element

I would like to create a carousel and for that I would like to add prev and next class to current li.

My active class work fine in my list but I 

<div id="carrousel">
  <ul>
    <li></li>
    <li></li>
    <li class="prev_slide"></li>
    <li class="active"></li>
    <li class="next_slide"></li>
    <li></li>
    <li></li>
  </ul>
</div>

My problem is that I don't know how to delete prev_slide and next_slide each time the li.active change. Each time remove prev and next class to the active class. And at the end of my list add next_slide to the first element etc...

jQuery('#carrousel ul').find('li.active').prev().addClass('prev_slide');
jQuery('#carrousel ul').find('li.active').next().addClass('next_slide');

Thanks in advance for your help

Upvotes: 0

Views: 4215

Answers (3)

bukart
bukart

Reputation: 4906

https://jsfiddle.net/yq62bc8f/

var $slides = jQuery('#carrousel ul > li');
var $active = $slides.filter('.active');

var $prev = $active.prev();
if (!$prev.length) {
  $prev = $slides.last();
}

var $next = $active.next();
if (!$next.length) {
  $next = $slides.first();
}

$slides.removeClass('prev_slide').removeClass('next_slide');
$prev.addClass('prev_slide');
$next.addClass('next_slide');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can find within your slides with filter() the current active and than find the prev and next (like you already did). At the edges you can just check if you got an element if not, then just use the first/last one.

Upvotes: 1

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

try this code

$('ul li').click(function() {
  $('li').removeClass('active');
  $('li').removeClass('prev_slide');
  $('li').removeClass('next_slide');
  $(this).addClass('active');
  $('#carrousel ul').find('li.active').prev().addClass('prev_slide');
  $('#carrousel ul').find('li.active').next().addClass('next_slide');
});
.prev_slide,
.next_slide {
  background: blue;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carrousel">
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
</div>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Here is exactly what you need 

$( document ).ready(function() {
    $('#carrousel li').on('click',function(){
       $('#carrousel li').removeClass('prev_slide');
       $('#carrousel li').removeClass('next_slide');
       $('#carrousel li').removeClass('active');
       $(this).addClass('active');
       var previous = $('.active').prev();
        if(previous.length == 0){
             previous = $('#carrousel li').last();   
        }
        previous.addClass('prev_slide');

        var next = $('.active').next();
        if(next.length == 0){
           next = $('#carrousel li').first();
        }
         next.addClass('next_slide');
    });
});
.prev_slide { color: red; }
.next_slide { color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carrousel">
  <ul>
    <li>11111</li>
    <li>211111</li>
    <li class="prev_slide">311111</li>
    <li class="active">41111</li>
    <li class="next_slide">5111111</li>
    <li>6111111</li>
    <li>71111</li>
  </ul>
</div>

You can notice that i have compared the length of the previous and the next element so that if they do not exist then it is circularly selected.

Upvotes: 0

Related Questions