Как заставить Карусели вести себя независимо - PullRequest
Новая
       26

Как заставить Карусели вести себя независимо

2 голосов
/ 20 октября 2019

Как заставить Карусели вести себя независимо Веб-сайт: 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 (), чтобы заставить карусели вести себя независимо.

Заранее спасибо ...

1 Ответ

1 голос
/ 21 октября 2019

Поскольку вы используете класс для идентификации текущего активного изображения, а класс является общим, идентификатор выбирает все элементы, соответствующие критериям. Что вы можете сделать, это указать несколько элементов и, следовательно, иметь возможность ограничить выбор элементов.

Оберните элементы ползунка и элементы управления ползунком внутри одного элемента 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>
...