Shopify themes, liquid, logos, and UX
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!
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025