How can I change slides with dragging the mouse in Webflow like the slider on this page: http://canna.webflow.io/ using custom code?

Published on
September 22, 2023

To change slides with dragging the mouse in Webflow like the slider on the provided page, you can use custom code by following these steps:

  1. Before getting started, make sure you have a Webflow project created and have a section with a slider element on your desired page.

  2. Go to your project dashboard and click on your project name. Then select the "Custom Code" tab.

  3. In the "Head Code" section, add the following code:

<script src="https://cdn.jsdelivr.net/npm/@webflow/slide-interactions@1.3.13/dist/slide-interactions.js"></script>

This script is provided by Webflow and enables the dragging function for your slider.

  1. Go back to your project's designer view and select your slider element.

  2. In the "Settings" tab of the right panel, scroll down to the "Custom Attributes" section.

  3. Click on the plus button to add a new custom attribute.

  4. Set the attribute name as "data-slide-interactions" and set its value to an empty string.

  5. Finally, publish your website to see the changes take effect.

Now, your slider should allow you to change slides by dragging the mouse. Note that this solution relies on external JavaScript code, so ensure that you have an internet connection for the slider to function properly. Additionally, it's always recommended to test and preview your changes to ensure everything is working as expected.

Additional Resources

Q: How can I change slides with dragging the mouse in Webflow?
Q: Can I use custom code to enable slide dragging in a Webflow slider?
Q: Is it possible to replicate the slider on the provided website in Webflow using dragging functionality?