Streaming live at 10am (PST)

CSS Slider Syncing Problems *SplideJS*

Trying to figure out how to sync these two splide.js sliders. Here is the guide but my understanding of JS is limited and I just cant figure out how to write the code correctly to make it work in Webflow. Would anyone be able to help me?

I tried this, but the second slider just respond. I assume it didn’t mount

// do not call mount() here.
primarySlider.sync( secondarySlider ).mount();

Here is my site Read-Only:

Below is the code I have used in the past for synced Splide sliders:

<!-- Call Splide JS --> 
<script src=""></script>


// Create and mount the thumbnails slider.
var secondarySlider = new Splide( '#secondary-slider', {
	fixedWidth  : 100,
	fixedHeight : 64,
  rewind      : true,
	isNavigation: true,
	gap         : '2em',
	/*focus       : 'center', */
	pagination  : false,
  arrows      : false,
	breakpoints : {
		'600': {
			fixedWidth  : 66,
			fixedHeight : 40,
} ).mount();

// Create the main slider.
var primarySlider = new Splide( '#primary-slider', {
	width  :'100%',
	height :'35em',
  type       : 'fade',
	/*heightRatio: 0.5, */
	pagination : false,
	arrows     : false,
  drag       : false,
	/*cover      : true, */
} );

// Set the thumbnails slider as a sync target and then call mount.
primarySlider.sync( secondarySlider ).mount();


Hopefully this helps