Web Bae•6mo ago

Webflow Multi Image CMS

I have a CMS slider of multi images for each of the cms items. Used swiper js for this. Though I am able to slide through respective slides of the slider by dragging but the navigation arrows slides each and every slide of the sliders.

7 Replies

Sushant Dhiwar•6mo ago

https://preview.webflow.com/preview/nicoenmenorcamain?utm_medium=preview_link&utm_source=designer&utm_content=nicoenmenorcamain&preview=ebcf954fe5ad5e296be41a775a06d46d&pageId=6569beec18d91dfe24470071&workflow=preview - preview link inside the 'Je pars en vacances' page and custom code is inside the page. Please help with this or to apply any different approach @Web Bae

Web Bae•6mo ago

@Sushant Dhiwar can you send a live link Putting this script in the <head> tag makes it execute before the DOM is built. So your querySelector functions won't work.

<script>
// Add classes to swiper containers
  var x = document.querySelectorAll("div.swiper-container");
  x.forEach(function(ele, i){
          ele.className += ` swiper-${i}`; 
  });
  
  // Add classes to next button
  var y = document.getElementById("projects").querySelectorAll("div.slider-next");
  y.forEach(function(ele, i){
              ele.className += ` slider-next-${i}`; 
  });
  
  var z = document.getElementById("projects").querySelectorAll("div.slider-prev");
  z.forEach(function(ele, i){
              ele.className += ` slider-prev-${i}`; 
  });
  
  // Add class to each pagination
  var x = document.getElementById("projects").querySelectorAll("div.swiper-pagination-small");
  x.forEach(function(ele, i){
          ele.className += ` pagination-${i}`; 
  });
  
 </script>

<script>
// Add classes to swiper containers
  var x = document.querySelectorAll("div.swiper-container");
  x.forEach(function(ele, i){
          ele.className += ` swiper-${i}`; 
  });
  
  // Add classes to next button
  var y = document.getElementById("projects").querySelectorAll("div.slider-next");
  y.forEach(function(ele, i){
              ele.className += ` slider-next-${i}`; 
  });
  
  var z = document.getElementById("projects").querySelectorAll("div.slider-prev");
  z.forEach(function(ele, i){
              ele.className += ` slider-prev-${i}`; 
  });
  
  // Add class to each pagination
  var x = document.getElementById("projects").querySelectorAll("div.swiper-pagination-small");
  x.forEach(function(ele, i){
          ele.className += ` pagination-${i}`; 
  });
  
 </script>

Try moving the logic inside the loop in your </body> tag, before instantiating each Swiper instance.

Sushant Dhiwar•6mo ago

Hey @Web Bae trying to execute and understand the above code, the live link:https://nicoenmenorcamain.webflow.io/je-pars-en-vacances

Je pars en vacances

Sushant Dhiwar•6mo ago

Thanks @Web Bae I was able to crack it!

Vhibezfx•5mo ago

Hi @Sushant Dhiwar did you later implement it with swiper, I did similar stuff with splide because I couldn’t get swiper to work

Sushant Dhiwar•5mo ago

Yes I was able to implement it with swiper by targeting each of my cms item

Vhibezfx•5mo ago

Nice 👍🏽

Gaming

Programming

Webflow Multi Image CMS