Re: Problems initializing SwiperJS on Shopify

Problems initializing SwiperJS on Shopify

peterpeter
Tourist
3 0 2

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!

 

Replies 4 (4)

Guleria
Shopify Partner
3403 679 963

Use 
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
or 
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>

- If helpful then please Like and Accept Solution.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
peterpeter
Tourist
3 0 2

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..

weeza
Tourist
3 1 0

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. 

AeffeLab_Andrei
Shopify Partner
2 0 0

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', {});
})