jquery - 添加多个 jquery 图像 slider

Question

我一直在想这个问题，我试图在一页上有多个图像 slider ，但似乎无法让它工作。该 slider 确实有效，但是当我复制 slider 以添加更多 slider ，然后当您单击“下一步”滑动图像 slider 时，所有其他 slider 都会受到影响，导致它们全部滑动，我试图做到这一点，因此当您单击该 slider 时 slider 仅影响其中一个 slider ，而不是所有 slider 。

如果您需要更多代码或更多解释，请告诉我，我将非常乐意提供更多信息。

*旁注 - 我尝试过使用“$(this)”，但不起作用我只是收到一个错误，我猜是因为我没有正确使用它，尽管我之前在其他元素中使用过它。

 function changeSlide(direction){

            var currentImg = $('.active');
            
            var nextImg = currentImg.next();
            
            var prevImg = currentImg.prev();
            
            if(direction == 'next'){
                if(nextImg.length)
                    nextImg.addClass('active');
    
                else
                    $('.NxtImg1 img').first().addClass('active');
            } else{
                if (prevImg.length)
                    prevImg.addClass('active');
                else 
             $('.NxtImg1 img').last().addClass('active');
            }
            
            currentImg.removeClass('active');
        }
        

  
                .injuryimg{
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-wrap: wrap;
                }
                .prev{
                    margin: 0px auto;
                    margin-left: 0px;
                    padding: 8px 5px;
                    background: #555;
                    color: #fff;
                    display: inline-block;
                    width: fit-content;
                    height: auto;
                    cursor: pointer;
                }
                .next{
                    margin: 0px auto;
                    margin-right: 0px;
                    padding: 8px 5px;
                    background: #555;
                    color: #fff;
                    display: inline-block;
                    width: fit-content;
                    height: auto;
                    cursor: pointer;
                }

                
                .NxtImg1{
                    width: 100%;
                    height: 300px;
                    display: block;
                    overflow: hidden;
                }

                
                .NxtImg1 img{
                    width: 100%;
                    height: auto;
                    display: none;

                }

                .NxtImg1 img.active{
                    display: block;
                    width: 100%;
                    height: auto;

                }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="injuryimg">
                <div class="NxtImg1">
                    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
                </div>
                <a class="prev" onclick="changeSlide('prev')">Prev</a><a class="next" onclick="changeSlide('next')" >Next</a>
            </div>

  <div  class="injuryimg">
                <div class="NxtImg1">
                    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
                </div>
                <a class="prev" onclick="changeSlide('prev')">Prev</a><a class="next" onclick="changeSlide('next')" >Next</a>
            </div>

Answer 1

您需要将单击的元素传递到您的函数中，以便您只能找到与您所在容器相关的元素

function changeSlide(currentElem, direction) {

  var $container = $(currentElem).closest('.injuryimg');  // find the closest parent container to the button that has been clicked with this class
  var currentImg = $container.find('.active');    // only get the active image within that container
  var nextImg = currentImg.next();
  var prevImg = currentImg.prev();

  if (direction == 'next') {
    if (nextImg.length)
      nextImg.addClass('active');
    else
      $container.find('img').first().addClass('active');
  } else {
    if (prevImg.length)
      prevImg.addClass('active');
    else
      $container.find('img').last().addClass('active');
  }

  currentImg.removeClass('active');
}

.injuryimg {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.prev {
  margin: 0px auto;
  margin-left: 0px;
  padding: 8px 5px;
  background: #555;
  color: #fff;
  display: inline-block;
  width: fit-content;
  height: auto;
  cursor: pointer;
}

.next {
  margin: 0px auto;
  margin-right: 0px;
  padding: 8px 5px;
  background: #555;
  color: #fff;
  display: inline-block;
  width: fit-content;
  height: auto;
  cursor: pointer;
}

.NxtImg1 {
  width: 100%;
  height: 300px;
  display: block;
  overflow: hidden;
}

.NxtImg1 img {
  width: 100%;
  height: auto;
  display: none;
}

.NxtImg1 img.active {
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="injuryimg">
  <div class="NxtImg1">
    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
  </div>
  <a class="prev" onclick="changeSlide(this, 'prev')">Prev</a><a class="next" onclick="changeSlide(this, 'next')">Next</a>
</div>

<div class="injuryimg">
  <div class="NxtImg1">
    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
  </div>
  <a class="prev" onclick="changeSlide(this, 'prev')">Prev</a><a class="next" onclick="changeSlide(this, 'next')">Next</a>
</div>