Using an outside button for changing slides?

Design help Custom code
1

Hi,
I want to use a button that should change sliders. That button is not in the slider component. It is at outside of the Slider.

how can I control slides in this way?

2

Hi @delizade, the ability to change slides via a link or a button outside of the slider is not built in yet, but it can be done using some custom jquery script, take a peek here: Is it possible to link to a specific slide in a slider? - #12 by bartekkustra

I hope this helps!

1 Like
3

Another vote FOR having this option implemented. Changing a slider with a button would be very nice.

4

You can also make prev and next button outside the slider like this:

<script>
	const sliderBullits = document.getElementsByClassName("w-slider-dot");
  let activeSlide = 0;
  
  document.getElementById('next-teacher').addEventListener('click', function (event) {
		changeActive(1);
	});
  
	document.getElementById('prev-teacher').addEventListener('click', function (event) {
		changeActive(-1);
	});
  
  function changeActive(nr) {
  	activeSlide += nr;
    if (activeSlide >= sliderBullits.length) {
    	activeSlide = 0;
    }
    sliderBullits[activeSlide].click();
  }
</script>
1 Like
5

Hi Maurice, dankjewel voor de code! I was wondering how to change it so it works for more than one slider on the same page? I have limited javascript knowledge, could you help me with this? My public site is: https://due-studio.webflow.io

6

thanks for your answer, adding to your answer, this code will prevent user to click the previous button first and then need to click the next button twice.

<script>
	const sliderBullits = document.getElementsByClassName("w-slider-dot");
  let activeSlide = 0;

  
  document.getElementById('next-testimonials').addEventListener('click', function (event) {
		changeActive(1);
	});
  
	document.getElementById('prev-testimonials').addEventListener('click', function (event) {
		changeActive(-1);
	});
  
  function changeActive(nr) {
  	activeSlide += nr;
    if (activeSlide == -1 || activeSlide == 0) {
      document.getElementById("prev-testimonials").style.pointerEvents = "none";
    } else
    {
      document.getElementById("prev-testimonials").style.pointerEvents = "auto";
    }
    if (activeSlide >= sliderBullits.length) {
    	activeSlide = 0;
    }
    sliderBullits[activeSlide].click();
  }
</script>