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")
    }
    });


});

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")
    }
    });


});

• javascript
• jquery
• pagination

• 1 can u write your code in feddle jsfiddle – Gaurang s Commented Apr 28, 2014 at 7:38
• Possible duplicate of Call next and prev function of jquery jCarousel – Batu.Khan Commented Apr 28, 2014 at 7:42

5 Answers 5

Plz change if condition

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

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")
}
});


});