Help with Multiple Swiper Instances and Dynamic Initialization

Store Design
, ,

Topic summary

A developer is encountering issues implementing multiple Swiper.js instances on a single page. They’re attempting to differentiate instances by dynamically appending section.id to both the Swiper class name and initialization code.

Current Implementation:

  • Using new Swiper(".mySwiper--{{ section.id }}", {...}) for initialization
  • Applying matching class "swiper mySwiper--{{ section.id }}" to container divs

Problem:
The setup fails to initialize properly—either no instances work or only one initializes successfully.

Status: The question remains unanswered with no solutions or responses provided yet. The developer is seeking guidance on proper dynamic targeting and initialization techniques for multiple Swiper instances.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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!