Multiple Slider Single Control in single page

Yes,it is possible to include multiple slider under single control in our html page.Please find below the html code and css to implement multiple slider.
Two swiper slider is initialised. And control of first slide is assigned to second slide.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1 , shrink-to-fit=no">
  <title>Multiple Slider</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
</head>

<style>
  body {
    margin: 0;
    padding: 0;
    position: relative;
  }

  .multipleSlider-slider {
    display: flex;
    max-width: 100%;
  }

  .multipleSlider-first-slider-wrapper {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 44%;
    max-width: 49%;
  }

  .multipleSlider-first-slider {

    height: 500px;
    width: calc(89.712%);
    border-radius: 20px;
    text-align: center;

  }

  .multipleSlider-first-text {
    background-color: antiquewhite;
    height: 200px;
    align-self: center;
    margin-left: 21%;
    font-size: 24px;
    transition: all 0.3s;
    max-width: 33vw;
    border-radius: 20px;
    text-align: center;
  }



  .multipleSlider-second-slider-wrapper {
    position: relative;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;

  }

  .multipleSlider-first-second-slider {
    height: 200px;
    border-radius: 20px;
    text-align: center;
    width: calc(78.426%);
    margin: 0;

  }


  .multipleSlider-swiper-slide {
    display: grid;
    overflow: hidden;
  }

  .multipleSlider-swiper-slide-first {
    position: relative;
    overflow: hidden;
    display: grid;
    margin: 0;
  }

  .multipleSlider-swiper-slide-second {
    position: relative;
    overflow: hidden;
    background-color: aqua;
    border-radius: 20px;
    text-align: center;
  }




  .swiper-container-3d .swiper-slide-shadow-left {
    background-image: none;
  }

  .swiper-container-3d .swiper-slide-shadow-right {
    background-image: none;
  }

  .multipleSlider-second {
    object-fit: cover;
    object-position: center;
    border-radius: 40px;
    width: 39.26vw;
    height: 200px;

  }

  .multiple-slider-heading {
    font-size: 45px;
    font-weight: 400;
    color: #F7AE10;
    letter-spacing: 0.9px;
    line-height: 1.4;
    margin: 0;
    margin-left: 11.5%;
  }


  .swiper-3d .swiper-slide-shadow {
    background: none;
  }
</style>

<body>
  <h3 class="multiple-slider-heading">Multiple Slides</h3>
  <div class="multipleSlider-slider">
    <div class="multipleSlider-first-slider-wrapper">
      <div class="swiper multipleSlider-first-slider">
        <div class="swiper-wrapper multipleSlider-swiper-wrapper-first">
          <div class="swiper-slide multipleSlider-swiper-slide-first">

            <div class="multipleSlider-first-text">
              First Slide 1
            </div>

          </div>
          <div class="swiper-slide multipleSlider-swiper-slide">

            <div class="multipleSlider-first-text">
              First Slide 2
            </div>

          </div>
          <div class="swiper-slide multipleSlider-swiper-slide">

            <div class="multipleSlider-first-text">
              First Slide 3
            </div>

          </div>
          <div class="swiper-slide multipleSlider-swiper-slide">

            <div class="multipleSlider-first-text">
              First Slide 4

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

    <div class="multipleSlider-second-slider-wrapper">
      <div class="swiper multipleSlider-first-second-slider">
        <div class="swiper-wrapper multipleSlider-swiper-wrapper-second">
          <div class="swiper-slide multipleSlider-swiper-slide-second">
            <div id="multipleSlider-second-1" class=" multipleSlider-second">
              Second Slide1
            </div>
          </div>
          <div class="swiper-slide multipleSlider-swiper-slide-second">
            <div id="multipleSlider-second-2" class="multipleSlider-second">
              Second Slide2
            </div>
          </div>
          <div class="swiper-slide multipleSlider-swiper-slide-second">
            <div id="multipleSlider-second-2" class="multipleSlider-second">
              Second Slide3
            </div>
          </div>
          <div class="swiper-slide multipleSlider-swiper-slide-second">
            <div id="multipleSlider-second-2" class="multipleSlider-second">
              Second Slide4
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
  const windowWidth = window.innerWidth / 2.4521072796934864;
  // alert(windowHeight);
  var firstSwiper = new Swiper('.multipleSlider-first-slider', {
    direction: "horizontal",
    effect: "slide",
    autoHeight: true,
    loop: false, // Not recommended to enable!!!
    allowTouchMove: false,
  });

  var secondSwiper = new Swiper('.multipleSlider-first-second-slider', {
    effect: "cards",
    grabCursor: true,
    autoHeight: true
    // width:windowWidth

  });
  secondSwiper.controller.control = this.firstSwiper;

</script>

</html>
Leave a comment Cancel reply
