Problems initializing SwiperJS on Shopify

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'




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.



Replies 2 (2)
Shopify Partner
2786 555 795

<script src=""></script>
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>


Need a Shopify developer? Email:

- Skype: navrocks1
- Try GEMPAGES a great page builder
-Advance Search Filter
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..