how to use different swiperJS in one Html Page

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


 
            
                services
            
            
             
              
                
                
                  Our service one
                  Our service two
                
              
              
                
                
                  Lorem ipsum dolor sit, amet consectetur
                  Lorem ipsum dolor sit, amet consectetur

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.

user_9291557 · Answer

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:

Correct:

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



 

  
  
    
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6
    Slide 7
    Slide 8
    ...
  
  
  



  
  
    
    Slide 1
    Slide 2
    Slide 3

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



 



  
  
    
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6
    Slide 7
    Slide 8
    ...
  
  
  



  
  
    
    Slide 1
    Slide 2
    Slide 3
  
  
  




  
  
    
    Slide 1
    Slide 2

user_3807365 · Answer

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







  
    services
  


  
    
    
      
        
        
          Our service one
          Our service two
        
      
      
      
        
        
          Lorem ipsum dolor sit, amet consectetur
          Lorem ipsum dolor sit, amet consectetur

how to use different swiperJS in one Html Page

2 Answers

Basic example

snippet

Loop throw example (multiple sliders with same setting):