Help with Multiple Swiper Instances and Dynamic Initialization

Help with Multiple Swiper Instances and Dynamic Initialization

cptnbluebaer
Shopify Partner
1 0 0

 

Hi everyone,

I’m trying to use multiple Swiper.js instances on the same page and ensure each one is initialized correctly. To separate the instances, I’m dynamically appending the section.id to the Swiper class and initializing it as follows:

 

 

 

var swiper = new Swiper(".mySwiper--{{ section.id }}", {
  // Swiper options here
});

 

 
<div class="swiper mySwiper--{{ section.id }}">

</div>

However, this setup doesn’t seem to initialize the Swiper correctly. It either fails to work entirely or only one instance initializes.

Does anyone have experience with handling multiple Swiper instances dynamically? Am I missing something in the way I’m targeting or initializing these elements?

Thanks in advance for your help!

Replies 0 (0)