Streaming live at 10am (PST)

How can I Programatically move the slider?


#1

Is there some slick jQuery I can use to move the slider to a certain slide when I've selected an option from a dropdown on my page?


#2

You forgot to show us what you already have.

Please paste your:

  1. published URL, and
  2. public share link for your project

#3

From my old library back in 2014 or earlier:

Link: Published Link
Preview: Preview Link

<script>
	$(document).ready(function() {
		$('#heroslide1').click(function(e) {
			e.preventDefault();
			$('.hero-link').removeClass('active');
			$(this).addClass('active');
			$('.w-round div:nth-child(1)').trigger('tap');
		});
		$('#heroslide2').click(function(e) {
			e.preventDefault();
			$('.hero-link').removeClass('active');
			$(this).addClass('active');
			$('.w-round div:nth-child(2)').trigger('tap');
		});
		$('#heroslide3').click(function(e) {
			e.preventDefault();
			$('.hero-link').removeClass('active');
			$(this).addClass('active');
			$('.w-round div:nth-child(3)').trigger('tap');
		});
		$('#heroslide4').click(function(e) {
			e.preventDefault();
			$('.hero-link').removeClass('active');
			$(this).addClass('active');
			$('.w-round div:nth-child(4)').trigger('tap');
		});
		$('#heroslide5').click(function(e) {
			e.preventDefault();
			$('.hero-link').removeClass('active');
			$(this).addClass('active');
			$('.w-round div:nth-child(5)').trigger('tap');
		});
	});
</script>

#4

Thanks for the memories @bart :wink: This is a great example :slightly_smiling:


#5

Share URL: https://preview.webflow.com/preview/swami-rc?preview=10d3c3c8916e209ae0d9d1ed2000d40f
Published: http://swami-rc.com/

Im not a expert, but this code example looks to be firing code off of the click event for the sliders themselves?

If you look at my site, you'll see some products that have dropdowns for options. I would like to hook into the click event of these dropdowns and advance the slider to the appropriate slide. Does this code help do something like that?


#6

One thing needs to change first:

Redo the slider, but do not delete the slider nav buttons (bullets) at the bottom of the slider. Give it a class and hide them instead.

Then paste this in Page Settings > Custom Code > Footer Code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    $('.choicescolumn').on('change', '#os3, #os3-1, #os-8', function() {
      $(this).parents('.productrow').find('.w-slider-dot').eq(this.selectedIndex).trigger('tap');
    });
});
</script>

Webflow slider with a thumbnail
#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.