Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi everyone
I've successfully added the Swiper JS Library and CSS to our theme (Narrative).
It's currently sat in in the assets folder as swiper-bundle.min.js and swiper-bundle.min.css
I've been attempting to initialise it but due to the lack of ability to do anything like
import Swiper from 'swiper-bundle.min.js'
or
var swiper = require('swiper-bundle.min.js')
I don't know how I'll be able to get my initializing custom.js to run this code.
const swiper = new Swiper('.swiper', { loop: true, observer: true, autoplay: { delay: 5000, }, direction: 'horizontal', navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', }, slidesPerView: 1, spaceBetween: 10, breakpoints: { 320: { slidesPerView: 2, spaceBetween: 20 }, 480: { slidesPerView: 3, spaceBetween: 30 }, 640: { slidesPerView: 4, spaceBetween: 40 } } });
Any ideas about how to do this on Shopify would be welcome.
Thanks!
Use
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
or
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>
Hi Guleria,
Thanks, but I had got the script loading already using
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>
However, it's the initializing of the instance of Swiper that I'm trying to do. As the autoplay isn't working and the navigation isn't working, I think I have to bring in the Navigation and Pagination modules into the js file.. but Shopify doesn't seem to be straightforward with that..
Hi Peterpeter,
have found a solutions for integrating swiper js in your shopify store? My console always gets an error "Swiper is not defined" eventho i included everything correctly. I use the swiper init in the newly created liquid code but it doesnt work.
The thing is that swiper does not render after the liquid gets rendered 😐 So you should add an event listener as 'load' and initialize it in there as this:
window.addEventListener("load", function(){
const swiper = new Swiper('.your_swiper_class', {});
})
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024