How can I sync two splide.js sliders in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To sync two Splide.js sliders in Webflow, you can follow these steps:

Add the Splide.js library to your Webflow project by including the necessary JavaScript and CSS files. You can do this by linking to the CDN URLs or by downloading the files and uploading them to your project.
Create two separate HTML elements in your Webflow project where you want to display the sliders. These elements can be divs, sections, or any other container elements.
Add the necessary HTML structure for each slider. You will need to create an unordered list (<ul>) inside each container element, and then add the list items (<li>) for each slide. Make sure to assign a unique class or ID to each container element to differentiate them.
Initialize the Splide.js sliders using JavaScript. In your Webflow project, create a custom code section where you can add your JavaScript. Use the new Splide() constructor to create separate instances of the Splide.js sliders for each container element. Include the necessary options such as type, perPage, and sync to define the behavior of the sliders.
Use the sync option to set up the synchronization between the two sliders. Specify the unique class or ID of the other slider in the sync option for each instance of the slider. This will ensure that when one slider navigates to a different slide, the other slider will also move accordingly.
Customize the appearance and behavior of the sliders using CSS and additional JavaScript options provided by Splide.js. You can modify the styling of the slides, add navigation arrows, autoplay options, and more.
Publish your Webflow project and test the synced Splide.js sliders. Make sure that the sliders are working as expected and that the synchronization is functioning correctly.

Additional Tips:

You can add any additional features provided by Splide.js, such as pagination, arrows, or autoplay, to enhance the user experience of your sliders.
Customize the appearance of the sliders by modifying the CSS for both the container elements and the individual slides.
Remember to test your sliders across different devices and browsers to ensure cross-compatibility.

By following these steps, you should be able to sync two Splide.js sliders in your Webflow project and create an interactive and engaging user experience.

Q1. How can I install the Splide.js library in Webflow?

Q2. Can I sync more than two Splide.js sliders in Webflow?

Q3. Is it possible to use Splide.js sliders with dynamic content in Webflow?

How can I resolve the error message I am receiving in Webflow Logic Beta when trying to use a quote request form and it says "something is wrong with the flow trigger, either the form no longer exists, or there are type errors"?

Why is the font styling reverting to Arial on my new page in Webflow, while it remains unchanged on my homepage?

Is the scrolling issue I am experiencing in Webflow caused by a browser compatibility problem or could it be due to an unfamiliar element I have added to my page?

What is causing the issue where new pages load at the bottom instead of the top on the contact form in Webflow?

How can I make the yellow box that appears after entering an email transparent in Webflow?

In Webflow, is it possible to change the text of a fixed heading when hovering over a specific project without using custom code?

How can I add code to track onclick events in Webflow?

How can I hide the nav bar on a single page in Webflow without affecting the nav bar on any other pages?

Can someone provide an example of how to use an ID in Webflow?

How can I change my normal background color to a gradient background color using custom code in Webflow?