Plz change if condition
if($activeLi.next().length>0 ){
$activeLi.next().addClass('active');
}else{
$('.pagination').find("li:first").addClass("active")
}
Question
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:
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")
}
});
});
Solution
Plz change if condition
if($activeLi.next().length>0 ){
$activeLi.next().addClass('active');
}else{
$('.pagination').find("li:first").addClass("active")
}
OTHER TIPS
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")
}
});
});