I add this pagination.js script when you change page 1,2,3,4,5

$(document).ready(function(){
  var $listItems = $('.pagination li');

  $listItems.click(function(){
    $listItems.removeClass('active');
    $(this).addClass('active');  

  });
});

I want add a function to prev and next arrow of carrousel, when your click on the arrow, the function remove class .active of the previous page and add the .class active in the next page.

Arrow controls code:

<div class="arrowPosition2"> 
              <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left arrowSlider"></span>
              </a>
              <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right arrowSlider"></span>
              </a>
</div>

My english is not very good, you can see this screenshot: screenshot

Thanks a lot.

EDIT:

 <div class="arrowPosition2"> 
              <a id="arrowPrev" class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left arrowSlider"></span>
              </a>
              <a id="arrowNext" class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right arrowSlider"></span>
              </a>
 </div>
$(document).ready(function(){
  var $listItems = $('.pagination li');
  var $arrowItems = $('.arrowPosition2 a');

  $listItems.click(function(){
    $listItems.removeClass('active');
    $(this).addClass('active');  
    var activeLink=$(this);
  });

     $('#arrowPrev').on('click',function(){
    var $activeLi=$('.pagination').find("li.active");
    $activeLi.removeClass('active');

    if($activeLi.prev()!=null && $activeLi.prev()!=undefined ){
    $activeLi.prev().addClass('active');  
    }else{
    $('.pagination').find("li:last").addClass("active")
    }
    });

     $('#arrowNext').on('click',function(){
    var $activeLi=$('.pagination').find("li.active");
    $activeLi.removeClass('active');

    if($activeLi.next()!=null && $activeLi.next()!=undefined ){
    $activeLi.next().addClass('active');  
    }else{
    $('.pagination').find("li:last").addClass("active")
    }
    });


});
有帮助吗?

解决方案

Plz change if condition

if($activeLi.next().length>0 ){
$activeLi.next().addClass('active');  
}else{
$('.pagination').find("li:first").addClass("active")
}

enter image description here

其他提示

i think this will help you

var activeLink;

$(document).ready(function(){
  var $listItems = $('.pagination li');

  $listItems.click(function(){
  $listItems.removeClass('active');
  $(this).addClass('active');  
  var activeLink=$(this);////  store in variable and do work on pev next btn
  });
});
$('#Arrow').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.prev()!=null && $activeLi.prev()!=undefined ){
$activeLi.prev()..addClass('active');  
}else{
$('.pagination').find("li:last").addClass("active")
}
});
$('#NEXT_ARROW_ID').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.next()!=null && $activeLi.next()!=undefined ){
$activeLi.next().addClass('active');  
}else{
$('.pagination').find("li:first").addClass("active")
}
});

this is your : pagination.js

$(document).ready(function(){
  var $listItems = $('.pagination li');
var $arrowItems = $('.arrowPosition2 a');

 $listItems.click(function(){
$listItems.removeClass('active');
$(this).addClass('active');  
var activeLink=$(this);
});

 $('#arrowPrev').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.prev().length>0 ){
$activeLi.prev().addClass('active');  
}else{
$('.pagination').find("li:last").addClass("active")
}
});

$('#arrowNext').on('click',function(){
var $activeLi=$('.pagination').find("li.active");
$activeLi.removeClass('active');

if($activeLi.next().length>0){
$activeLi.next().addClass('active');  
 }else{
$('.pagination').find("li:first").addClass("active")
}
});


});
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top