Problems initializing SwiperJS on Shopify

[peterpeter]

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!

[Guleria]

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

[peterpeter]

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]

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]

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