how to use different swiperJS in one Html Page-CodePudding

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 >
            <div >
                <h1>services</h1>
            </div>
            <div >
             <div >
              <div >
                <img  src="/img/Digital.png" alt="Avatar" style="width:100%">
                <div >
                  <h4 ><b>Our service one</b></h4>
                  <p >Our service two</p>
                </div>
              </div>
              <div >
                <img  src="/img/coding.png" alt="Avatar" style="width:100%">
                <div >
                  <h4 ><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
                  <p >Lorem ipsum dolor sit, amet consectetur</p>
                </div>
</div>
<!-- swiper2 -->
<div >
           <div >
            <img  src="/img/customers1.png"  style="width:100%">
            <img  src="/img/custopmer2.png" style="width:100%">
            <img  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.

CodePudding user response：

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 >
  <div >
    <h1>services</h1>
  </div>


  <div >
    <div >
    
      <div >
        <img  src="/img/Digital.png" alt="Avatar" style="width:100%">
        <div >
          <h4 ><b>Our service one</b></h4>
          <p >Our service two</p>
        </div>
      </div>
      
      <div >
        <img  src="/img/coding.png" alt="Avatar" style="width:100%">
        <div >
          <h4 ><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
          <p >Lorem ipsum dolor sit, amet consectetur</p>
        </div>
      </div>
      
    </div>
  </div>

  <!-- swiper2 -->
  <div >
    <div >
      <img  src="/img/customers1.png" style="width:100%">
      <img  src="/img/custopmer2.png" style="width:100%">
      <img  src="/img/customer3.png" style="width:100%">
    </div>
  </div>
</div>

CodePudding user response：

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 >
<!--  const swiper = new Swiper('.will_not_work', { -->

Correct:

<div >
<!--  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/[email protected]/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/[email protected]/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container --> 
<div  slider_one>
  <!-- Additional required wrapper -->
  <div >
    <!-- Slides -->
    <div ><a>Slide 1</a></div>
    <div >Slide 2</div>
    <div >Slide 3</div>
    <div >Slide 4</div>
    <div >Slide 5</div>
    <div >Slide 6</div>
    <div >Slide 7</div>
    <div >Slide 8</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div ></div>
</div>

<div  slider_two>
  <!-- Additional required wrapper -->
  <div >
    <!-- Slides -->
    <div ><a>Slide 1</a></div>
    <div >Slide 2</div>
    <div >Slide 3</div>
  </div>
  <!-- If we need pagination -->
  <div ></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/[email protected]/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/[email protected]/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container --> 

<main>
<div  slider_one>
  <!-- Additional required wrapper -->
  <div >
    <!-- Slides -->
    <div ><a>Slide 1</a></div>
    <div >Slide 2</div>
    <div >Slide 3</div>
    <div >Slide 4</div>
    <div >Slide 5</div>
    <div >Slide 6</div>
    <div >Slide 7</div>
    <div >Slide 8</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div ></div>
</div>

<div  slider_two>
  <!-- Additional required wrapper -->
  <div >
    <!-- Slides -->
    <div ><a>Slide 1</a></div>
    <div >Slide 2</div>
    <div >Slide 3</div>
  </div>
  <!-- If we need pagination -->
  <div ></div>
</div>


<div  slider_two>
  <!-- Additional required wrapper -->
  <div >
    <!-- Slides -->
    <div ><a>Slide 1</a></div>
    <div >Slide 2</div>
  </div>
  <!-- If we need pagination -->
  <div ></div>
</div>

</main>