Have you encountered any issues with Splide.js not displaying slides properly when using the 'top-to-bottom' direction 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.

I have not personally encountered any issues with Splide.js not displaying slides properly when using the 'top-to-bottom' direction in Webflow. However, if you are experiencing issues with the display of slides, there are a few possible causes and solutions to consider:

Incorrect markup: Ensure that you have added the correct HTML structure for Splide.js. The slides should be wrapped in a parent container with the class "splide" and each slide should have the class "splide__slide". Double-check that you have included all necessary classes and elements.
CSS conflicts: Check for any CSS conflicts that may be affecting the display of the slides. Inspect the elements using your browser's developer tools and look for any overriding styles or conflicting CSS rules. Try temporarily removing any custom CSS or third-party stylesheets to see if that resolves the issue.
JavaScript conflicts: Make sure that there are no JavaScript errors or conflicts that may be preventing Splide.js from functioning correctly. Check your browser's console for any error messages. If there are any conflicting JavaScript libraries or plugins on the page, try removing them or rearranging the order in which they are loaded to see if that resolves the issue.
Splide.js configuration settings: Review the configuration settings for Splide.js to ensure that you have set the appropriate options for the 'top-to-bottom' direction. Check the Splide.js documentation for the correct configuration settings and make sure they are correctly implemented.
Splide.js version: Ensure that you are using the latest version of Splide.js. Older versions may have bugs or compatibility issues that have been fixed in newer releases. Upgrading to the latest version may resolve any display issues.

In conclusion, while I personally have not encountered any issues with Splide.js not displaying slides properly when using the 'top-to-bottom' direction in Webflow, it's important to check for correct markup, CSS conflicts, JavaScript conflicts, configuration settings, and Splide.js version to troubleshoot any issues with slide display.

Additional Questions:

How do I add Splide.js to my Webflow project?
Does Webflow have built-in slider functionality?
Are there any alternatives to Splide.js for creating sliders in Webflow?

Is it possible to create a timeline based website with unlimited timeline items using only Webflow?

How can I implement reCAPTCHA before redirecting users to a different page in Webflow?Is it possible to prevent form submission on click and still be redirected to the next page after completing the reCAPTCHA verification in Webflow?

What is the best way to replace the data set with user inputs from the form in Webflow? Additionally, why is the button not functioning when the provided code is included on the page in Webflow?

What can I do to fix the issue of my nav links appearing blue on the live site in Webflow, even though they are supposed to be orange according to the styles assigned?

Is it possible to create a site in Webflow where folders are the page root?

How can I fix the error message "link elements can not be pasted inside each other" when trying to copy my design from Figma to Webflow?

Is there a way to prevent webflow forms from sending empty or unchecked checkboxes via email when a user fills out a form?

Has anyone been able to successfully get the default Webflow success message to appear after passing data to a custom endpoint without being redirected to a new page?

How can I implement the JQuery plugin "parallax.js" into Webflow?

How can I modify the size of the default Webflow Cookie consent bar on my page?