How to create dynamic image sliders with multiple buttons for different sliders. I need to create image slider gallery for different years

I'm trying to create an image slider gallery for different years. If I click 2017 that particular div alone has to display. I'm struggling there. Can anyone kindly help me to complete this work? I'm learning through tutorials and videos but still, I couldn't complete it. Please I need some help as I am still learning. Below are my HTML, CSS, and JavaScript code.

$(document).ready(function () {

  $('#myCarousel').carousel({ interval: 3000 });

  $('.multi-item-carousel .item').each(function () {
      var itemToClone = $(this);

      for (var i = 1; i < 6; i++) {
          itemToClone = itemToClone.next();

          if (!itemToClone.length) {
              itemToClone = $(this).siblings(':first');
          }

          itemToClone.children(':first-child').clone().addClass("cloneditem-" + (i)).appendTo($(this));
      }
  });
});

$(document).ready(function () {
    $('#show').click(function () {
        $('.menu').toggle("slide");
    });
});
$(document).ready(function () {
    $('#show1').click(function () {
        $('.menu1').toggle("slide");
    });
});
$(document).ready(function () {
    $('#show2').click(function () {
        $('.menu2').toggle("slide");
    });
});
#slider-text {
  padding-top: 40px;
  display: block;
  text-align: center;
}

#slider-text .col-md-6 {
  overflow: hidden;
}

#slider-text h2 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 3px;
  margin: 30px auto;
  padding-left: 40px;
}



#slider-control img {
  padding-top: 60%;
  margin: 0 auto;
}

@media screen and (max-width: 992px) {
  #slider-control img {
      padding-top: 70px;
      margin: 0 auto;
  }
}

.multi-item-carousel .carousel-control {
  width: 4%;
  background-image: none;
}

.multi-item-carousel .carousel-control.left {
  margin-left: 5px;
}

.multi-item-carousel .carousel-control.right {
  margin-right: 5px;
}

@media all and (min-width: 768px) {

  .multi-item-carousel .carousel-inner>.active.left,
  .multi-item-carousel .carousel-inner>.prev {
      left: -50%;
  }

  .multi-item-carousel .carousel-inner>.active.right,
  .multi-item-carousel .carousel-inner>.next {
      left: 50%;
  }

  .multi-item-carousel .carousel-inner>.left,
  .multi-item-carousel .carousel-inner>.prev.right,
  .multi-item-carousel .carousel-inner>.active {
      left: 0;
  }

  .multi-item-carousel .carousel-inner .cloneditem-1 {
      display: block;
  }
}

@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {

  .multi-item-carousel .carousel-inner>.item.active.right,
  .multi-item-carousel .carousel-inner>.item.next {
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
      left: 0;
  }

  .multi-item-carousel .carousel-inner>.item.active.left,
  .multi-item-carousel .carousel-inner>.item.prev {
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
      left: 0;
  }

  .multi-item-carousel .carousel-inner>.item.left,
  .multi-item-carousel .carousel-inner>.item.prev.right,
  .multi-item-carousel .carousel-inner>.item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      left: 0;
  }
}

@media all and (min-width: 992px) {

  .multi-item-carousel .carousel-inner>.active.left,
  .multi-item-carousel .carousel-inner>.prev {
      left: -16.666%;
  }

  .multi-item-carousel .carousel-inner>.active.right,
  .multi-item-carousel .carousel-inner>.next {
      left: 16.666%;
  }

  .multi-item-carousel .carousel-inner>.left,
  .multi-item-carousel .carousel-inner>.prev.right,
  .multi-item-carousel .carousel-inner>.active {
      left: 0;
  }

  /*  */
}

@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {

  .multi-item-carousel .carousel-inner>.item.active.right,
  .multi-item-carousel .carousel-inner>.item.next {
      -webkit-transform: translate3d(16.666%, 0, 0);
      transform: translate3d(16.666%, 0, 0);
      left: 0;
  }

  .multi-item-carousel .carousel-inner>.item.active.left,
  .multi-item-carousel .carousel-inner>.item.prev {
      -webkit-transform: translate3d(-16.666%, 0, 0);
      transform: translate3d(-16.666%, 0, 0);
      left: 0;
  }

  .multi-item-carousel .carousel-inner>.item.left,
  .multi-item-carousel .carousel-inner>.item.prev.right,
  .multi-item-carousel .carousel-inner>.item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      left: 0;
  }
}

.flex-container {
  display: flex;
  background-color: #f1f1f1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<body>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700&subset=latin-ext" rel="stylesheet">

    <div class="flex-container">
        <table>
            <tr>
                <!-- <ul id="list"> -->
                <td>
                    <div id="div1">
                        <div id="show"><button id="btn1" data-box="div1" class="Active">2018</button></div>
                        <div class="menu" style="display: none;">

                            <!-- <ol> -->
                            <div class="container-fluid">

                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="carousel multi-item-carousel slide" id="myCarousel"
                                            data-ride="carousel">
                                            <div class="carousel-inner">

                                                <div class="item active">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>

                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>


                                            </div>

                                            <div id="slider-control">
                                                <a class="left carousel-control" href="#myCarousel"
                                                    data-slide="prev"><img src="left.PNG" alt="Left"
                                                        class="img-responsive"></a>
                                                <a class="right carousel-control" href="#myCarousel"
                                                    data-slide="next"><img src="right.PNG" alt="Right"
                                                        class="img-responsive"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </ol> -->

                        </div>
                    </div>
                    <!-- </li> -->
                </td>
                <td>
                    <!-- <li> -->
                    <div id="div2">
                        <div id="show1"><button id="btn2" data-box="div2">2017</button></div>
                        <div class="menu1" style="display: none;">
                            <!-- <ol> -->
                            <div class="container-fluid">

                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="carousel multi-item-carousel slide" id="myCarousel"
                                            data-ride="carousel">
                                            <div class="carousel-inner">

                                                <div class="item active">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img
                                                                src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>

                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img
                                                                src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img
                                                                src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>


                                            </div>

                                            <div id="slider-control">
                                                <a class="left carousel-control" href="#myCarousel"
                                                    data-slide="prev"><img src="left.PNG" alt="Left"
                                                        class="img-responsive"></a>
                                                <a class="right carousel-control" href="#myCarousel"
                                                    data-slide="next"><img src="right.PNG" alt="Right"
                                                        class="img-responsive"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </ol> -->

                        </div>
                    </div>
                    <!-- </li> -->
                </td>
                <td>
                    <div id="div3">
                        <div id="show2"><button id="btn3" data-box="div3">2016</button></div>
                        <div class="menu2" style="display: none;">

                            <!-- <ol> -->
                            <div class="container-fluid">

                                <div class="row">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="carousel multi-item-carousel slide" id="myCarousel"
                                            data-ride="carousel">
                                            <div class="carousel-inner">

                                                <div class="item active">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>

                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>
                                                <div class="item">
                                                    <div class="col-xs-12 col-sm-6 col-md-2">
                                                        <a href="#"><img src="https://images.unsplash.com/photo-1522926193341-e9ffd686c60f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"
                                                                class="img-responsive center-block"></a>

                                                    </div>
                                                </div>


                                            </div>

                                            <div id="slider-control">
                                                <a class="left carousel-control" href="#myCarousel"
                                                    data-slide="prev"><img src="left.PNG" alt="Left"
                                                        class="img-responsive"></a>
                                                <a class="right carousel-control" href="#myCarousel"
                                                    data-slide="next"><img src="right.PNG" alt="Right"
                                                        class="img-responsive"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </ol> -->

                        </div>
                    </div>
                </td>

                <!-- </ul> -->
            </tr>
        </table>
    </div>



</body>



Read more here: https://stackoverflow.com/questions/67016013/how-to-create-dynamic-image-sliders-with-multiple-buttons-for-different-sliders

Content Attribution

This content was originally published by Preethi Damodaran at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: