Can someone show me how to turn cards on a grid into a horizontal carousel on mobile and smaller breakpoints in Webflow, with horizontal scrolling enabled for touchpad and touch?

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 transform cards on a grid into a horizontal carousel on mobile and smaller breakpoints in Webflow, with horizontal scrolling enabled for touchpad and touch, you can follow these steps:

Create a grid: Start by setting up your card layout using a grid. Place the cards inside the grid so that they are aligned horizontally.
Enable overflow: Select the grid element and go to the Styles panel. Under the Overflow dropdown, select "Scroll." This will enable scrolling for the grid.
Set grid display: In the Styles panel, select the grid element again and set its display property to "Grid." This will ensure that the cards are displayed in a grid layout.
Adjust grid settings: Modify the grid settings to ensure the cards are displayed correctly. You may need to adjust the number of columns and row heights to fit your design requirements.
Create a new class: Select one of the cards within the grid. In the Class field of the Styles panel, click on the Plus (+) icon to create a new class. Give it a name, such as "carousel-card."
Apply horizontal scrolling: With the new class selected on the card, go to the Styles panel. Scroll down to the Transform section and set the Overflow X property to "Scroll." This will enable horizontal scrolling for the card.
Enable touchpad and touch scrolling: In the Styles panel, scroll to the Touch section and check the "Enable touchpad scrolling" and "Enable touch scrolling" checkboxes. This will ensure that touch and touchpad devices can scroll horizontally on the card.
Apply class to all cards: After setting up the "carousel-card" class on one card, select all the other cards within the grid and apply the same class. This will ensure that all the cards have the same horizontal carousel behavior.
Configure responsive settings: Lastly, ensure that the grid and card behaviors are responsive. You can adjust the number of columns, row heights, and other grid settings for different breakpoints to optimize the layout for each device size.

With these steps, you can turn your cards on a grid into a horizontal carousel on mobile and smaller breakpoints in Webflow, with horizontal scrolling enabled for touchpad and touch.

Additional questions:

How do I create a grid layout in Webflow?
How can I enable horizontal scrolling for an element in Webflow?
What are the responsive design options available in Webflow?

Is there a built-in option in Webflow to add a background transition effect on hover, without having to use custom code?

Can anyone provide information on how to create a water effect with mouse in Webflow?

How can I achieve text pop-up when hovering over each link in a Webflow menu, also referred to as indexing?

How can I set up two tabs in Webflow to link scroll to separate sections of the same page?

Is there a workaround in Webflow to automatically trigger an animation when an element is given a specific class, even if the element has multiple classes?

Why is the animation not running smoothly on the published version of the Webflow site but appears smooth in the Webflow designer preview?

Is it possible to create an interaction in Webflow where the navbar background turns transparent when the user navigates back to the very top of the page?

How can I create continuous movement for three rows of logos in Webflow?

Is there a reason why the interaction is not working after adding a CSS class to the .post-wrapper element based on a CMS item's technology? Is there a workaround to fix this issue?

How can I trigger a slide transition in Webflow when the arrow button is selected?