Javascript Animate не скользит

Question

Я настраиваю ползунок в коде ручки, и теперь функция animate не хочет фактически выполнять движение слайда. Он перемещает каждый слайд, но движения скольжения нет. Я не могу понять, в чем проблема. Вот кодекс https://codepen.io/theMugician/pen/VxKgBY

function moveLeft() {
        $('.slider__slider-list').animate({
            left: + slideWidth
        }, 200, function () {
            $('.slider-list__item:last-child').prependTo('.slider__slider-list');
            $('.slider__slider-list').css('left', '');
        });
    };

    function moveRight() {
        $('.slider__slider-list').animate({
            left: - slideWidth
        }, 200, function () {
            $('.slider-list__item:first-child').appendTo('.slider__slider-list');
            $('.slider__slider-list').css('left', '');
        });
    };

Answer 1

Вы можете добавить Начальное количество слайдов var для определения того, что является настоящим слайдом. И вы можете выполнить слайдер петли. Пожалуйста, попробуйте ниже. После того, как вы можете адаптировать это для вас.

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
  
	var slideCount = $('.slider-list__item').length;
  var slideStart = 0;
	var slideWidth = $('.slider-list__item').width();
	var slideHeight = $('.slider-list__item').height();
	var sliderUlWidth = slideCount * slideWidth;
	
	$('.slider__container').css({ width: slideWidth, height: slideHeight });
	
	$('.slider__slider-list').css({ width: sliderUlWidth });
	
    $('.slider-list__item:last-child').prependTo('.slider__slider-list');

    function moveLeft() {
        slideStart--
        if(slideStart<0){
            slideStart = slideCount-1
         }
        $('.slider-list__item').animate({
            left: -(slideStart*slideWidth)
        }, 200, function () {
        
        });
        
    };

    function moveRight() {
       slideStart++

       if(slideStart>=slideCount){
          slideStart = 0
       }
        $('.slider-list__item').animate({
            left:  -(slideStart*slideWidth)
        }, 200, function () {
        });
        
    };

    $('.slider__control--prev').click(function () {
        moveLeft();
    });

    $('.slider__control--next').click(function () {
        moveRight();
    });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

html {
  border-top: 5px solid #fff;
  background: #000;
  color: #000;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  font-weight: 300;
}

.slider {
  position: relative;
  width: 600px;
  margin: 0 auto;
}

.slider__container {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border: 2px solid #fff;
}

.slider-list {
  position: relative;
  margin: 10px;
  margin-bottom: 10px;
  padding: 0;
  height: 200px;
  list-style: none;
}

.slider-list__item {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 600px;
  height: 300px;
  background: #000;
  color: #fff;
  text-align: left;
}

.slider-list__item p {
  margin: 0 50px;
}

.slider-list__item h1 {
  margin: 20px 50px 0;
}

.slider__control--next, .slider__control--prev {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

.slider__control--prev {
  left: -80px;
  border-radius: 0 2px 2px 0;
}

.slider__control--next {
  right: -80px;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
 <a href="#" class="slider__control--next">></a>
 <a href="#" class="slider__control--prev"><</a>
<div class="slider__container">
  
  <ul class='slider__slider-list'>
    <li class='slider-list__item' style="background: #333;">
      <h1>SLIDE 1</h1>
      <p>Vestibulum eget vestibulum sapien. Quisque in rhoncus mi, vel posuere libero. Proin blandit placerat nibh, sit amet sodales ex egestas vitae. Maecenas ultrices velit sodales ipsum tristique, eu ornare tortor aliquet. Ut ultrices enim dolor, eu scelerisque elit mattis non. Etiam efficitur nec enim vitae aliquam. Praesent congue metus lorem, sed porttitor nisi tempus tristique.</p>
    </li>
    <li class='slider-list__item'>
      <h1>SLIDE 2</h1>
      <p>Vestibulum eget vestibulum sapien. Quisque in rhoncus mi, vel posuere libero. Proin blandit placerat nibh, sit amet sodales ex egestas vitae. Maecenas ultrices velit sodales ipsum tristique, eu ornare tortor aliquet. Ut ultrices enim dolor, eu scelerisque elit mattis non. Etiam efficitur nec enim vitae aliquam. Praesent congue metus lorem, sed porttitor nisi tempus tristique.</p>
    </li>
    <li class='slider-list__item'>
      <h1>SLIDE 3</h1>
      <p>Vestibulum eget vestibulum sapien. Quisque in rhoncus mi, vel posuere libero. Proin blandit placerat nibh, sit amet sodales ex egestas vitae. Maecenas ultrices velit sodales ipsum tristique, eu ornare tortor aliquet. Ut ultrices enim dolor, eu scelerisque elit mattis non. Etiam efficitur nec enim vitae aliquam. Praesent congue metus lorem, sed porttitor nisi tempus tristique.</p>
    </li>
  </ul>  
</div>
</div>
<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>

Answer 2

Это была простая проблема. Я забыл ввести правильное имя класса в CSS. У меня было .slider-list, но это должно было быть .slider__slider-list. Так что это не имеет ничего общего с анимацией Javascript.

Answer 3

Я не очень хорош в javascript, но в приведенном выше коде нет места, где вы вызываете или вызываете любую из функций. Или, я думаю, если 200 - это код для одной кнопки / ссылки, и это то, что движется, попробуйте ввести имя функции в одну из этих}, 200, function () {after function ....

также похоже, что вы ссылаетесь на класс с именем .animate, но в CodePen Css нет класса с именем .animate

надеюсь, что это поможет, но, вероятно, не очень хороший ответ

Также Вы отключили функцию щелчка ()

$('.slider__control--prev').click(function () {
    moveLeft();
});

$('.slider__control--next').click(function () {
    moveRight();