How to make the Carousels behave independenly

user_9106183 0
Viewed 35

How to make the Carousels behave independly The website: http://vice9988.000webhostapp.com/ The Code:

<!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>

First Carousel works fine being alone... but when I add the second Carousel... the NEXT arrows drives both Carousels....

I think you can use the jQuery key this() to make the Carousels behave independly.

Thanks in advance...

carousel slider jquery
1 Answers

Since you are using class to identify the current active image and the class are generic the identifier is picking all the elements matching the criteria. What you can do is specify a few elements and hence be able to limit the elements getting selected.

Wrap the slider elements and slider controls inside one HTML element.

<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>

Following are the changes which will work if you do the corresponding changes to HTML code as well

<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>
user_35082010
Related