Слайдер изображения не go к следующему или предыдущему элементу

Question

(я сталкиваюсь с проблемой, когда я нажимаю на предыдущий шеврон, слайдер работает один раз и останавливается после следующего щелчка)

Я новичок в JavaScript, и я пытаюсь создать свой собственный код слайдера , сначала, когда вы нажимаете на следующий шеврон, код работает хорошо, но когда я нажимаю на предыдущий шеврон, код останавливается после второго щелчка.

$(document).ready(function(){
    var currentImg = $('.slider-img .active');
    var nextImg = currentImg.next();
    var prevImg = currentImg.prev();

//slide to right
$('.next').on('click', function(){
    if(!currentImg.is(':last-child')){
        currentImg.delay(1000).removeClass('active');
        nextImg.addClass('active');
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div').eq(0).addClass('active');
    }      
});

//Slide to left
$('.prev').on('click', function(){
    if(!currentImg.is(':first-child')){
        currentImg.delay(1000).removeClass('active');
        prevtImg.addClass('active');
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div:last-child').addClass('active');
    }

 });
 });

полный код указан на codepen ниже

Answer 1

Проблема в том, что вы не устанавливаете variable на новый value после нажатия кнопки «Предыдущая» или «Следующая».

Вот как это работает, даже если ваш подход немного сложен :

(Также я рекомендую использовать let вместо var для вашего variable declaration)

$(document).ready(function(){
    let currentImg = $('.slider-img .active');
    let nextImg = currentImg.next();
    let prevImg = currentImg.prev();

//slide to right
$('.next').on('click', function(){
    if(!currentImg.is(':last-child')){
        currentImg.delay(1000).removeClass('active');
        nextImg.addClass('active');
        currentImg = nextImg;
        nextImg = currentImg.next();
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div').eq(0).addClass('active');
        currentImg = $('.slider-img .active');
        nextImg = currentImg.next();
    }      
});

$('.prev').on('click', function(){
    if(!currentImg.is(':first-child')){
        currentImg.delay(1000).removeClass('active');
        prevImg.addClass('active');
        currentImg = prevImg;
        prevImg = currentImg.prev();
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div:last-child').addClass('active');
        currentImg = $('.slider-img .active');
        prevImg = currentImg.prev();
    }

 });
 });

*{
    padding: 0;
    margin: 0;
}
.slider{
    position: relative;
    width:600px;
    height: 500px;
    margin: 30px auto 0;
}
.slider ul{
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 3;
}
.slider ul li{
    width:12px;
    height: 12px;
    border-radius: 50%;
    background-color: #cccccc;
    list-style: none;
    margin:0 10px;
    display: inline-block;
    cursor: pointer;
}
.slider ul li.active{
    background-color: #000;
}
.slider-img div{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    opacity: 0;
}
.slider-img div.active{
    opacity: 1;
}
.slider-img img{
    max-width: 100%;
    height: 100%;
}
.slider p{
    position: absolute;
    z-index: 2;
    top: 50%;
    color: #cccccc;
    padding: 20px;
    cursor: pointer;
}
.slider .next{
    right: 0;
}
.item1{background-color:red}
.item2{background-color:green}
.item3{background-color:purple}
.item4{background-color:yellow}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<section class="slider">
            <ul>
              <li class="dot active" onclick="currentSlide(1)"></li>
              <li class="dot" onclick="currentSlide(2)"></li>
              <li class="dot" onclick="currentSlide(3)"></li>
              <li class="dot" onclick="currentSlide(4)"></li>
            </ul>
  
             <div class="slider-img">
                  <div class="item item1 active"></div> 
                  <div class="item item2"></div> 
                  <div class="item item3"></div> 
                  <div class="item item4"></div>             </div>  
              <p class="next">
                  <i class="fas fa-chevron-right">next</i>
              </p>
              <p class="prev">
                  <i class="fas fa-chevron-left">prev</i>
              </p>
  
          </section>

Answer 2

Поскольку вы объявляете свою переменную вне события click, когда document равен ready currentImg является первым элементом, после нажатия кнопки currentImg необходимо снова обнаружить, потому что сейчас это второй элемент, поэтому для чтобы избежать этой проблемы, переместите variable в обработчик click:

$('.next').on('click', function(){
    var currentImg = $('.slider-img .active');
    var nextImg = currentImg.next();
    var prevImg = currentImg.prev();

    if(!currentImg.is(':last-child')){
        currentImg.delay(1000).removeClass('active');
        nextImg.addClass('active');
    }else{
        currentImg.delay(1000).removeClass('active');
        $('.slider-img div').eq(0).addClass('active');
    }      
});

Улучшенная версия:

$(document).ready(function() {

  var firstChild = $('.slider-img div.item').eq(0);
  var lastChild = $('.slider-img div.item:last-child');

  //slide to right
  $('.next').on('click', function() {
    var currentImg = $('.slider-img .active');
    var nextImg = currentImg.next();

    if (!currentImg.is(':last-child')) {
      currentImg.delay(1000).removeClass('active')
      nextImg.addClass('active')
    } else {
      currentImg.delay(1000).removeClass('active')
      firstChild.addClass('active');
    }

  });

  //Slide to left
  $('.prev').on('click', function() {
    var currentImg = $('.item.active');
    var prevImg = currentImg.prev();

    if (currentImg.is(':first-child')) {
      currentImg.delay(1000).removeClass('active')
      lastChild.addClass('active')
    } else {
      currentImg.delay(1000).removeClass('active')
      prevImg.addClass('active');
    }

  });
});

* {
  padding: 0;
  margin: 0;
}

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

.slider ul {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 3;
}

.slider ul li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cccccc;
  list-style: none;
  margin: 0 10px;
  display: inline-block;
  cursor: pointer;
}

.slider ul li.active {
  background-color: #000;
}

.slider-img div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}

.slider-img div.active {
  opacity: 1;
}

.slider-img img {
  max-width: 100%;
  height: 100%;
}

.slider p {
  position: absolute;
  z-index: 2;
  top: 50%;
  color: #cccccc;
  padding: 20px;
  cursor: pointer;
}

.slider .next {
  right: 0;
}

.item1 {
  background-color: red
}

.item2 {
  background-color: green
}

.item3 {
  background-color: purple
}

.item4 {
  background-color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="slider">
  <ul>
    <li class="dot active" onclick="currentSlide(1)"></li>
    <li class="dot" onclick="currentSlide(2)"></li>
    <li class="dot" onclick="currentSlide(3)"></li>
    <li class="dot" onclick="currentSlide(4)"></li>
  </ul>

  <div class="slider-img">
    <div class="item item1 active"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
  </div>
  <p class="next">
    >
  </p>
  <p class="prev">
    < </p>

</section>