Is it possible to create a 3 column slider with Webflow where the first and third columns are 15% width and the middle column is 70%?

Published on
September 22, 2023

Yes, it is possible to create a 3 column slider with Webflow where the first and third columns have a width of 15% and the middle column has a width of 70%.

To achieve this, you can use Webflow's Slider component, combined with custom CSS styling. Here's a step-by-step guide on how to do it:

  1. Add a Slider component to your Webflow project by dragging and dropping it onto your page.

  2. Inside the Slider component, you'll find a Slide wrapper. Add three div elements inside the Slide wrapper. These will represent your three columns.

  3. Select the first and third div elements, which will be the columns with a width of 15%. Give them a class name by clicking on the "Settings" tab in the right sidebar, then selecting the "Class" field. For example, you can name them "column-left" and "column-right".

  4. Apply custom CSS to the "column-left" and "column-right" classes to set their width to 15%. To do this, go to the Design panel on the right sidebar, click on the "+ Add Field" button in the bottom left corner, and then select "Custom Code". In the CSS code field, enter the following code:

.column-left, .column-right {  width: 15%;}
  1. Select the second div element, which will be the middle column with a width of 70%. Give it a class name, such as "column-middle".

  2. Apply custom CSS to the "column-middle" class to set its width to 70%. In the Design panel, click on the "+ Add Field" button, select "Custom Code", and enter the following code:

.column-middle {  width: 70%;}
  1. You can further customize the styling, such as adding padding, margin, or other properties, to achieve the desired look for your slider.

  2. Preview your project to see the 3 column slider in action. You can use the Slider component's controls to navigate between the slider's columns.

By following these steps, you'll be able to create a 3 column slider with Webflow, where the first and third columns have a width of 15% and the middle column has a width of 70%.

Additional questions:

  1. How do I add images or content inside each column of the Webflow Slider component?
  2. Can I customize the transition effects between the different columns in the Webflow Slider component?
  3. Is it possible to make the slider responsive, so that it adapts to different screen sizes?