如何使轮播独立运行

Question

如何让轮播独立运行网站：http://vice9988.000webhostapp.com/ 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>  </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.container {
    width: 100px;
    overflow: auto;
}
.slider-inner {
    width: 100px;
    height: 110px;
    position: relative;
    overflow: hidden;
    float: left;
}
.slider-inner img {
    display: none;
    width: 100px;
    height: 110px;
}
.slider-inner img.active {
    display: inline-block;
}
.btn {
    background: transparent;
    border: none !important;
    font-size:0;
}
.nav {
    height: 60px;
    margin-top: 15px;
}
.next {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 60px solid #006FC4;
    border-bottom: 20px solid transparent;
}

</style>
</head>
<body>

<div class="container">
    <div class="slider-inner">
        <img src="image-1.jpg" alt="T-Shirt-1" class="active">
        <img src="image-2.jpg" alt="T-Shirt-2">
        <img src="image-3.jpg" alt="T-Shirt-3">
    </div>
</div>
<div class="nav">
    <button data-id="next" class="btn"><div class="next"></div></button>
</div>

<div class="container">
    <div class="slider-inner">
            <img src="image-4.jpg" alt="T-Shirt-1" class="active">
            <img src="image-5.jpg" alt="T-Shirt-2">
            <img src="image-6.jpg" alt="T-Shirt-3">
    </div>
</div>
<div class="nav">
    <button data-id="next" class="btn"><div class="next"></div></button>
</div>

<script>
$('.next').on('click', function() {
    var nextImg = $('img.active').next('.slider-inner img');
    if(nextImg.length == 0) {
        nextImg = $('.slider-inner img:first');
    }
    $('img.active').removeClass('active');
    nextImg.addClass('active');
});
</script>
</body>

</html>

第一个旋转木马单独使用时效果很好......但是当我添加第二个旋转木马时......下一个箭头驱动两个旋转木马....

我认为您可以使用 jQuery 键 this() 使轮播独立运行。

提前致谢...

Answer 1

由于您使用 class 来标识当前活动图像，并且 class 是通用的，因此标识符正在挑选所有符合条件的元素。您可以做的是指定一些元素，从而能够限制被选中的元素。

将滑块元素和滑块控件包裹在一个 HTML 元素中。

<div class="sliderContainer">
  <div class="container">
    <div class="slider-inner">
      <img src="image-4.jpg" alt="T-Shirt-1" class="active" />
      <img src="image-5.jpg" alt="T-Shirt-2" />
      <img src="image-6.jpg" alt="T-Shirt-3" />
    </div>
  </div>
  <div class="nav">
    <button data-id="next" class="btn"><div class="next"></div></button>
  </div>
</div>

如果您也对 HTML 代码进行相应的更改，以下是将起作用的更改

<script>
  $(".next").on("click", function(event) {
    var nextImg = $(event.target).parents(".sliderContainer").find("img.active").next(".slider-inner img");
    if (nextImg.length == 0) {
      nextImg = $(event.target).parents(".sliderContainer").find(".slider-inner img:first");
    }
    $(event.target).parents(".sliderContainer").find("img.active").removeClass("active");
    nextImg.addClass("active");
  });
</script>

如何使轮播独立运行

How to make the Carousels behave independenly

jquery

slider

carousel