The Slider element, sometimes called a carousel, shows content one slide at a time. Visitors move between slides with the arrows or dots, by swiping on a phone, or by dragging with a mouse, and you can also make it move by itself. A common use is a slideshow of product images, or a set of messages with text and buttons.
Adding content to a slide
A new Slider starts with one empty slide. In the editor it shows as a drop area that reads Drop an element or block here. The slider has no size of its own: it's as wide as the space it sits in, and its height comes from the content you put in the slides. The arrows and dots appear once there's more than one slide to move between.
Each slide is a drop area. Drag any element onto a slide and it sits inside that slide. Slides don't have settings of their own and can't be selected, so to give a slide a background, padding or a border, drop a Container into it first and put your content inside the Container. To add slides, use the add slide button on the slider's toolbar or raise Number of slides.
Elements you drop above or below each other in a slide stack from top to bottom. To place content side by side, drop the new element on the left or right edge of an element that's already in the slide. Shogun wraps the two in a Columns element for you, so you can set the column widths, the space between them and how they stack on smaller screens. To see where you can drop, open the three-dot menu in the top bar and choose Show Dropzones.
Drop an element on the left or right edge of another to place them side by side in a Columns element.
To move content from one slide to another, set Slides per page to 2 so the slides sit side by side, drag the element by its move handle into the other slide, then set Slides per page back.
If a slider is empty, you won't see anything on the live page.
Sizing content in a slide
Every slide is the same width: the width of the slider, less the space kept for the arrows, shared between the slides on screen. Content fills that width and sets its own height. The slider is then as tall as its tallest slide, and shorter slides line up at the top with space below. One tall image, such as a portrait photo among landscape ones, makes every slide that tall.
To keep the slides the same height, size the content inside them:
Images: select each Image element and, in its Dimensions section, choose the same Aspect Ratio for all of them, such as Widescreen (16:9), with Image fit on Cover. Each image is cropped to that shape whatever the shape of the original photo, and Image position sets which part stays in view. Use the device icon if you'd like a different shape on mobile.
Text and mixed content: put the content in a Container and give the Container on every slide the same Min Height, tall enough for the slide with the most content. Set Vertically align content to Middle to center content that's shorter than that. Use the device icon to set a different height for mobile.
Give every image in the slider the same Aspect Ratio so the slides are the same height.
A few things to keep in mind:
The Slider's own Min Height sets the height of the Slider element, not its slides. The slides keep their own height, with the arrows and dots beside and below them, and the extra height shows as empty space underneath. To make slides taller, set heights on the content inside them.
Equal column heights on a Columns element won't line up content across slides. It only stretches the first element in each column, and Image elements always keep their own aspect ratio.
With Slides per page above 1 the slides are narrower, so images and text shrink to fit. The same number applies on every screen size, so check the slider on mobile.
On a phone, the space kept for the arrows takes up a noticeable part of the width. Turn on Controls over content (see Controls over content) so the slides use the full width.
Slider settings
When the Slider is selected, the Main section of the settings panel has Mode, Number of slides, Slides per page, Animation and Auto Slide. These settings apply to every screen size.
The Slider Main section sets the mode, how many slides there are and what shows on each page.
Mode
Choose Slide or Loop.
In Slide mode the slides have a first and a last slide. The Rewind toggle (on by default) controls what happens at the end: with Rewind on, going forward from the last slide takes the visitor back to the first one. With Rewind off, the arrows fade out at the first and last slide.
In Loop mode there's no end: after the last slide the first one follows on in one smooth movement, in both directions. To do this, the slider makes hidden copies of your slides on the live page. Some elements, such as a Product Box, don't work in the copies, so use Slide mode with Rewind for sliders that hold products. Loop also needs more slides than Slides per page: if the two are equal, there's nowhere to move to, so the slider stays still and the arrows and dots are hidden.
Number of slides
A new slider has one slide. Raising the number adds empty slides at the end. Lowering it removes slides from the end, together with everything in them, without asking first. If that happens by mistake, use undo or restore an earlier version from Page versions in the three-dot menu. Empty slides aren't shown on the live page.
Slides per page
Slides per page sets how many slides are on screen at once. Set it above 1 for a carousel that shows several products or images side by side.
The arrows, the dots and Auto Slide move one slide at a time, not a whole page.
There's one dot for each place the slider can stop. In Slide mode that's the number of slides minus the slides per page, plus one (4 slides at 2 per page gives 3 dots). In Loop mode there's one dot per slide.
The same number is used on every screen size, so 3 per page on desktop is also 3 per page on a phone. To show a different number on mobile, use two sliders: set one up for desktop and one for mobile, then use each slider's Visibility settings to show it only on those screen sizes. Save them as snippets if you reuse them on other pages.
With more than one slide per page, the Animation list is limited to No Animation and the Slide speeds.
Animation
Animation sets how one slide changes to the next. Slide - Slow, Slide - Medium (the default) and Slide - Fast move the slides sideways at different speeds. The list also has fading, zooming and sliding entrances and exits, such as Fade In or Zoom Out Left, and No Animation. The entrances and exits are available in both Slide and Loop mode when Slides per page is 1. If you raise Slides per page while one of them is selected, the animation changes to No Animation.
The entrance and exit effects play on top of the sideways movement: the next slide still moves into place while it fades or zooms in. No Animation also shows a short sideways movement. If you'd like a fade without the sideways movement, contact us and we'll help you set it up.
Animations play on the live page and in Preview, not in the editor.
Auto Slide
By default the slider only moves when a visitor uses it. Turn on Auto Slide to move it automatically, then set Show each slide for (seconds) (5 by default). Turn on Pause autoplay on hover to stop it while a visitor's cursor is over the slider. With Auto Slide on, the slider goes back to the first slide after the last one, even in Slide mode with Rewind off.
Arrows and dots
The Controls section sets how visitors move the slider.
Set up the arrows and dots in the Controls section.
Arrows
Turn Show arrows on or off and choose an Arrow color. Arrow height sets the size of the arrow. Turn on Arrow background to put each arrow on a circle, square or rounded square, then set the Arrow background color and Arrow background padding.
Dots
Turn Show dots on or off and set the Selected dot color, Unselected dot color and Dots size. Selected dot width stretches the current dot into a pill (100% is a round dot; the live page shows up to 200%). Dots location places the dots on the left, center or right, and Space between dots sets the gap. Visitors can click a dot to jump to that slide.
If you turn off both the arrows and the dots, turn on Auto Slide too. Visitors can still swipe or drag, but nothing on the slider tells them they can.
Controls over content
By default the slider keeps a frame at each side for the arrows, so they sit beside your content. Turn on Controls over content to remove the frame and place the arrows and dots on top of the slides. The frame stays even if you hide the arrows, so turn this on if you want the slides to fill the full width.
The frame is transparent and shows your page background. To color it, place the slider inside a Container element and set a Background.
Size
In the Dimensions section, Full Width stretches the slider to the edges of the screen, outside your theme's page width. Min Height sets the height of the Slider element, not its slides (see Sizing content in a slide), and Max Width limits its width and centers it. Dimensions, Spacing, Borders, Box Shadow and Visibility can be set for each screen size; the Main and Controls settings apply to every screen size.
Slider toolbar
When the Slider is selected, its toolbar on the canvas has four extra buttons:
Move slide left and Move slide right move the slide you're looking at one place earlier or later in the order. They don't take you to another slide. To look through the slides while you edit, use the arrows or dots on the canvas; with dots turned on it's easier to see which slide you're on. Add slide adds an empty slide, and Remove slide deletes the current slide and its content.
Things to avoid
Placing a slider inside a Tabs element, or a slider inside another slider. These combinations can stop the arrows working or reset settings such as Slides per page.
Using Loop mode for sliders with Product Boxes or other product elements (see Mode).
Setting Slides per page to the same number as Number of slides. The slider then has nowhere to move, so the arrows and dots don't show.
Older Slider elements (Slider 1.0)
We only provide ongoing support for the current Slider element. Older Slider 1.0 elements keep working on your pages, but they won't get fixes or new features. To move to the current Slider, see Updating existing elements.
Pages built with the older Slider 1.0 may still have it. You can tell which version you have from the settings panel when the element is selected: if there's no Mode control, it's a Slider 1.0, which has fewer options (number of slides, Auto slide, and showing or hiding the arrows and dots). Older sliders aren't upgraded automatically. To use the newer options, add a new Slider, move your content into it, and republish the page.
 |  |
Slider 1.0 | Slider 2.0 |