Placeholder
Apr 27, 2018 148

How to create a slider

Key Items 

Creating an Element Slider

Creating a Section Slider

Creating an Element slider 

To create an Element Slider, you will first begin with an auto grid or an advanced grid. After adding images, text and other elements like Product Cards to your story, select the grid and convert it to a slider using the right-side panel:

Customizing your Element slider

After you've created your slider, you can customize the slider using the contextual panel on the right. You can control the following features: mode, slider height, slides to scroll, dots, arrows, loop, autoplay, transition and transition speed. In addition, you can customize the arrows and dots that appear for the slider including their on hover appearance.  

Screen_Shot_2020-01-13_at_10.51.57_AM.png


Note: If you are considering adding a hover effect, it needs to be added on the desktop breakpoint. 

Screen_Shot_2020-01-08_at_11.56.37_AM.png
Screen_Shot_2020-01-08_at_11.47.47_AM.png
Screen_Shot_2020-01-08_at_11.56.22_AM.png


Note: For Slider Mode, using center looks best when all of the images or elements in the grid have the same aspect ratio.

Creating a Section Slider

With the Section Slider you can convert a Pro Layout, Auto Grid, and an Advanced Grid into a slider. Section Sliders is not limited to a specific grid type - you can combine different grids based on your design and turn them into a section slider. All features supported for that grid type are supported in the slider.

Once your grids are ready click on the Layers tab on the media panel on the left and select the grids that will be converted into a slider.

To select the grids on the Layer tab, please use the keyboard controls on your device. (If you're working on a Mac, select CMD before selecting the grids with your mouse. If you're working on a PC, select CTRL before selecting the grids with your mouse.)

Once the girds are selected you will see an option on the right-side panel where you will simply click ‘Create Section Slider’

Note: The Grids don’t need to be stacked next to each other in the editor to be combined into a slider.

Once the Section Slider is created, you will see various options in the contextual panel on the right for turning on full width, auto play, and navigation for your section slider. As a reminder, Navigation is set to ON by default. 

Making Edits to Section Slider

Once the section slider is created, the slides are no longer editable.

To make any edit to the section slider, select “Edit Section Slider” on the right-side panel. The slider converts back to editable grids and you can proceed to make edits. Once all edits have been made, just click DONE on top of the screen and the Grids will then return back to the Section Slider state.

Customizing your Section slider

After you've created your section slider, you can customize the slider using the contextual panel on the right. You can control the following features: mode, slider height, slides to scroll, dots, arrows, loop, autoplay, transition and transition speed. In addition, you can customize the arrows and dots that appear for the slider including their on hover appearance.

Note: If you are considering adding a hover effect, it needs to be added on the desktop breakpoint.

Screen_Shot_2020-01-08_at_12.07.43_PM.png


Share

maker