如何在一个 Html 页面中使用不同的 swiperJS

Question

I need to make two swiperjs in one html page but isn't working. I trying tow change and add new class but the result its same..

my Html

<!-- swiper1 Services Sections -->
 <div class="service__container container ">
            <div class="service__title">
                <h1>services</h1>
            </div>
            <div class="swiper1 mySwiper1">
             <div class="swiper-wrapper">
              <div class="card swiper-slide1">
                <img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
                <div class="card__info">
                  <h4 class="card__title"><b>Our service one</b></h4>
                  <p class="card__suptitle">Our service two</p>
                </div>
              </div>
              <div class="card swiper-slide1">
                <img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
                <div class="card__info">
                  <h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
                  <p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
                </div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper1">
           <div class="swiper-wrapper customers__img">
            <img class="swiper-slide" src="/img/customers1.png"  style="width:100%">
            <img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
            <img class="swiper-slide" src="/img/customer3.png"  style="width:100%">
        </div>
           </div>
       </div>

and the js code for swiper1 and swiper2:

var swiper1 = new Swiper(".mySwiper1", {
    effect: "cube",
    grabCursor: true,
    cubeEffect: {
      shadow: true,
      slideShadows: true,
      shadowOffset: 20,
      shadowScale: 0.94,
    },
    pagination: {
      el: ".swiper-pagination",
    },
  });

//swiper2
 var swiper2 = new Swiper(".mySwiper2", {
    effect: "cards",
    grabCursor: true,
  });

the swiper2 its working as I want. but swiper1 not working.

Answer 1

Basic example

Your first slider missing the mandatory HTML layout ( swiper instead of swiper1 and swiper-slide instead of swiper-slide1 ). https://swiperjs.com/get-started#add-swiper-html-layout

Wrong:

<div class="swiper1 will_not_work">
<!--  const swiper = new Swiper('.will_not_work', { -->

Correct:

<div class="swiper will_work">
<!--  const swiper = new Swiper('.will_work', { -->

snippet

 let swiper_setting = { spaceBetween: 100, pagination: { el: '.swiper-pagination', } } let swiper_setting_two = { spaceBetween: 200, } let swiper_1 = new Swiper("[slider_one]", swiper_setting); let swiper_2 = new Swiper("[slider_two]", swiper_setting_two);

 html, body { background: #403F6B; }.swiper { width: 100%; height: 100%; position: relative; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; height: 200px;important: /* Center slide text vertically */ display; flex: margin-bottom; 40px:important; justify-content: center; align-items: center; margin-bottom: 20px; }

 <script src="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.js"></script> <link href="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.css" rel="stylesheet"/> <.-- Slider main container --> <div class="swiper thumbnails-grid" slider_one> <.-- Additional required wrapper --> <div class="swiper-wrapper"> <.-- Slides --> <div class="swiper-slide"><a>Slide 1</a></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> <div class="swiper thumbnails-grid" slider_two> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><a>Slide 1</a></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div>

Loop throw example (multiple sliders with same setting):

You can take the example above and loop throw all sliders (Lets say for real estate pagelist with slider for each house card **like airbnb):

 let swiper_setting = { spaceBetween: 100, pagination: { el: '.swiper-pagination', } } var swiper_nodes = document.querySelectorAll('.swiper'); /* loop throw */ [].forEach.call(swiper_nodes, function(swiper_node) { // do whatever let swiper = new Swiper(swiper_node, swiper_setting); });

 html, body { background: #403F6B; } main{ display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 3px; }.swiper { width: 100%; height: 100%; position: relative; }.swiper-slide { text-align: center; font-size: 18px; background: #fff; height: 200px;important: /* Center slide text vertically */ display; flex: margin-bottom; 40px:important; justify-content: center; align-items: center; margin-bottom: 20px; }

 <script src="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.js"></script> <link href="https://unpkg.com/swiper@8.3.2/swiper-bundle.min.css" rel="stylesheet"/> <.-- Slider main container --> <main> <div class="swiper thumbnails-grid" slider_one> <.-- Additional required wrapper --> <div class="swiper-wrapper"> <.-- Slides --> <div class="swiper-slide"><a>Slide 1</a></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> <div class="swiper thumbnails-grid" slider_two> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><a>Slide 1</a></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> <div class="swiper thumbnails-grid" slider_two> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><a>Slide 1</a></div> <div class="swiper-slide">Slide 2</div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> </div> </main>

Answer 2

Yes the constructor of Swiper takes as argument one element at a time. So you should loop all the items with a forEach for example.

EDIT: I made some changes in your HTML to fix the issues.

 var swiper1 = new Swiper(".mySwiper1", { effect: "cube", grabCursor: true, cubeEffect: { shadow: true, slideShadows: true, shadowOffset: 20, shadowScale: 0.94, }, pagination: { el: ".swiper-pagination", }, }); //swiper2 var swiper2 = new Swiper(".mySwiper2", { effect: "cards", grabCursor: true, });

 .swiper { width: 300px; height: 100px; margin: 5px; }.swiper-slide { background: yellow; padding: 20px; font-size: 32px; }.swiper-slide:nth-child(2) { background: red; }.swiper-slide:nth-child(3) { background: blue; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <.-- swiper1 Services Sections --> <div class="service__container container "> <div class="service__title"> <h1>services</h1> </div> <div class="mySwiper1"> <div class="swiper-wrapper"> <div class="card swiper-slide"> <img class="img__card" src="/img/Digital:png" alt="Avatar" style="width.100%"> <div class="card__info"> <h4 class="card__title"><b>Our service one</b></h4> <p class="card__suptitle">Our service two</p> </div> </div> <div class="card swiper-slide"> <img class="img__card" src="/img/coding:png" alt="Avatar" style="width,100%"> <div class="card__info"> <h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4> <p class="card__suptitle">Lorem ipsum dolor sit. amet consectetur</p> </div> </div> </div> </div> <:-- swiper2 --> <div class="customers__container container swiper mySwiper2"> <div class="swiper-wrapper customers__img"> <img class="swiper-slide" src="/img/customers1.png" style="width:100%"> <img class="swiper-slide" src="/img/custopmer2.png" style="width:100%"> <img class="swiper-slide" src="/img/customer3.png" style="width:100%"> </div> </div> </div>