When I click on the button to go to the next slider it goes back one and when I click on the previous one it goes to the next.
function resetPos() {
$('.slider ul li').removeClass('transition');
$('.slider ul li').removeClass('left right');
}
//clicks
$('.prev').on('click', function(){
$('.slider ul li').addClass('transition right');
setTimeout(function(){
prev();
resetPos();
}, 500);
});
$('.next').on('click', function(){
$('.slider ul li').addClass('transition left');
setTimeout(function(){
next();
resetPos();
}, 500);
});
function init() {
$('.slider ul li').each(function(){
var curPos = $(this).index();
$(this).css('order', curPos+1);
});
}
function prev() {
var slider = $('.slider');
var sliderLength = slider.find('ul li').length;
$('.slider ul li').each(function(){
var curPos = parseInt($(this).css('order'));
var sliderLength = slider.find('ul li').length;
if (curPos < sliderLength) {
$(this).css('order', curPos+1);
}
else {
curPos = 1;
$(this).css('order', curPos);
}
});
}
function next() {
var slider = $('.slider');
var sliderLength = slider.find('ul li').length;
$('.slider ul li').each(function(){
var curPos = parseInt($(this).css('order'));
var sliderLength = slider.find('ul li').length;
if (curPos > 0) {
$(this).css('order', curPos-1);
}
else {
curPos = sliderLength-1;
$(this).css('order', curPos);
}
});
}
$(document).ready(function(){
init();
});
<div class="slider-container">
<div class="slider">
<ul class="cms-nav-slider">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
<li>
7
</li>
<li>
8
</li>
<li>
9
</li>
<li>
10
</li>
<li>
11
</li>
<li>
12
</li>
<li>
13
</li>
</ul>
<div class="slider-nav">
<div class="prev">
</div>
<div class="next">
</div>
</div>
</div>
</div>