Problem with the Slider is back to the previous and later slider

1

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>
    
asked by anonymous 20.01.2017 / 20:31

0 answers