如何在一個 Html 頁面中使用不同的 swiperJS

Question

我需要在一個 html 頁面中制作兩個 swiperjs，但無法正常工作。 我試圖改變並添加新的 class 但結果相同..

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

以及 swiper1 和 swiper2 的 js 代碼：

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,
  });

swiper2 按我的意願工作。 但 swiper1 不工作。

Answer 1

基本示例

您的第一個 slider 缺少強制性HTML 布局（ swiper而不是swiper1和swiper-slide而不是swiper-slide1 ）。 https://swiperjs.com/get-started#add-swiper-html-layout

錯誤的：

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

正確的：

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

片段

 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>

循環拋出示例（具有相同設置的多個滑塊）：

您可以使用上面的示例並循環拋出所有滑塊（假設對於每個房屋卡的 slider 的房地產頁面列表**如 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

是的， Swiper的構造函數一次將一個元素作為參數。 因此，例如，您應該使用forEach循環所有項目。

編輯：我對您的HTML進行了一些更改以解決問題。

 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>