Is it possible to add a horizontal scroll bar to a SwiperJS slider in Webflow?

Published on
September 22, 2023

Yes, it is possible to add a horizontal scroll bar to a SwiperJS slider in Webflow. Here's how you can do it:

  1. Add a SwiperJS slider to your Webflow project by dragging and dropping the Slider component onto your page.
  2. Select the Slider component and go to the Settings panel on the right-hand side of the Designer.
  3. Enable the "Enable Swiper" option.
  4. Scroll down to the "Swiper Options" section.
  5. Add the following code to the "Additional Options" field:
    ```javascript
    scrollbar: {
    el: '.swiper-scrollbar',
    },
    ```
  6. Publish your project to see the horizontal scroll bar added to your SwiperJS slider.

By following these steps, you will be able to add a horizontal scroll bar to your SwiperJS slider in Webflow.

Note: SwiperJS is a third-party JavaScript library for building sliders and carousels. It provides a flexible and customizable solution for creating slider components.