Gallery slider copy and paste not working

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?

Thank you!


Here is my site Read-Only: Webflow - Viewpoint

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:

  1. Go to Pages > Settings.
  2. Under ‘Before tag’, insert the code provided (see attached image for reference).
  3. 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>

Amazing! That works perfectly, thank you :slight_smile: