Roots Discourse

Sage 9 doesn't seems to work with Swiper 5

Hi there, im really beginner with Sage 9 and id like to install Swiper.js as a third party JavaScript. It dosen’t seems to work with the latest version of Sage 9.0.9, or maybe i did not installed it correctly.
I just buy the Theme Development with Sage eBook and i didn’t found a solution across the web or the eBook as well! i thought that maybe the error is something to do with eslint…

My error is always :
(Google Chrome) Uncaught ReferenceError: Swiper is not defined
(Safari) ReferenceError: Can’t find variable: Swiper

I use :

Here’s what i did for my homepage exemple :
I installed Swiper with ‘yarn add swiper’;
I called the import Swiper from ‘swiper’; it in /my-theme/ressources/assets/scripts/main.js just after import ‘jquery’;
I’ve added module > rules > exclude (on line 55) :
exclude: [/node_modules( ?![/|\] (bootstrap | foundation-sites | dom7 | ssr-window | swiper ))/],

I called the init Swiper in the routes/home.js in the init() (because my swiper is only in my homepage).

/* eslint-disable */
		var mySwiper = new Swiper('.swiper-container', {
			slidesPerView: 4,
			spaceBetween: 30,
			centeredSlides: true,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
		});
		/* eslint-enable */

I disable eslint here because i had another similar error :
7:8 error ‘mySwiper’ is assigned a value but never used no-unused-vars
7:23 error ‘Swiper’ is not defined no-undef

Please, i need your help @roots Team !
Thanks :slight_smile:

1 Like

Try to add it to:

externals: {
 jquery: 'jQuery',
},

Or add:

window.swiper = swiper;

1 Like

Thanks @huubl i did add as you said so and it works !
externals: {
jquery: ‘jQuery’,
Swiper: ‘swiper’,
},

Apparently, i have to import Swiper and initialize in the same file, other else, it wont work.

// Import Swiper.js
// import Swiper from 'swiper';
import { Swiper, Navigation, Pagination, Scrollbar, EffectCoverflow } from 'swiper/js/swiper.esm';
Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow]);
// window.swiper = Swiper;

$(document).ready(function() {
/* eslint-disable */
var swiper = new Swiper('.swiper-container', {
	slidesPerView: 4,
	spaceBetween: 30,
	centeredSlides: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});
/* eslint-enable */
});

Thanks for your help :slight_smile:

This topic was automatically closed after 42 days. New replies are no longer allowed.