Initialize swiperjs not working

[aksoforever (Qiang)]

Hi, discourse team,
I’m trying to add swiperjs to the hompage banner, but i faild when i initialize swiper

and this is my initialize code

var mySwiper = new Swiper (‘.swiper-container’, {
// Optional parameters
direction: ‘horizontal’,
loop: true,
// If we need pagination
pagination: {
el: ‘.swiper-pagination’,
clickable:true,
},
// Navigation arrows
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
})

but swiperjs does not working,
Many days ago i use owlCarousel get the same problem,
i think must i lose something, but i can’t get it,
anyone can help find my problem? who knows my mistake?
ps: use the flow to initialize swiper and owl, they will all work, but every back, need force frefresh the page, it can work again.

$(window).on(“load”, function(){
//…
});

[Bcat]

This is just a demo, you need to use {{#if displaydiscourseSwiper}} but after testing at after_header, it doesn’t show.
Better use css as well as load swss’s css and js library

https://github.com/bcat95/discourse-swiper

[aksoforever (Qiang)]

haha, thanks, very like this. it looks beautiful.