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!
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025