Hi there,
I’m working on a client’s site. There are some gallery sliders set up on existing pages. I want to copy and paste one on to a new page I’m working on, but when I do this the slider doesn’t not respond to clicking/sliding. It is static. I can’t work out how to make it work like the others as there doesn’t seem to be any code operating it, and it looks like the original designer built it rather than using the ‘slider’ element. Any advice?
It looks like the slider needs custom code to function properly. When you copied the gallery slider, only the elements were copied without the necessary code.
To fix this, please add the code before the </body> tag in the page settings. Here’s how:
Go to Pages > Settings.
Under ‘Before tag’, insert the code provided (see attached image for reference).
Save and republish the page.
Let me know if this resolves the issue!
Summary
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var lastSwiperID = 4;
for (var i = 1; i <= lastSwiperID; i++) {
var swiperClass = ".gallery_slider-" + i;
var paginationClass = ".gallery_pagination-" + i;
var nextElClass = ".slide_next-" + i;
var prevElClass = ".slide_prev-" + i;
var swiper = new Swiper(swiperClass, {
grabCursor: true,
slidesPerView: "auto",
pagination: {
el: paginationClass,
type: "fraction"
},
navigation: {
nextEl: nextElClass,
prevEl: prevElClass
}
});
}
</script>
