The Slider Element is a super powerful tool for creating scrolling sections of content on your pages. Each slide of the Slider Element is it's own Container, meaning that you can add more or less any element to it and customize it how you like! A great example of using the Slider element would be to create a slideshow of images that you can show on your pages to show off your products.

Shogun currently has two versions of the Slider element: Our 1.0 version, and our 2.0 version. The 2.0 version is currently being rolled out in batches to stores, but if you have been a Shogun installed merchant for a while or if you previously used the 1.0 version on a page it will still be present. You can tell which version of the slider you currently have from the Control Panel that appears on the right of the screen when the element is selected, as seen below:

The easiest way to tell the difference is to check to see if "Slider Mode" is present; if it is, you have a Slider 2.0 and should follow these instructions. If its not, you have a Slider 1.0 and should follow these instructions.

The Slider element has two modes: Slide and Loop.

In Slide mode, the Slider will display the slides in the order you added them. If the Rewind toggle is turned on, if a user is on the final slide and the slider progresses they will see a "rewind" animation and be returned to the first slide

If the Rewind toggle is disabled, once the user reaches the final slide the Slider will stop and the user will need to click the back arrow to go back.

In Loop mode, once the Slider reaches the final slide it will move straight back to the first Slide with no rewind animation in a smooth loop

Note: animations are not played in the editor, but will play on the live page. See Animation, below

The default setting for the Slider is to display each slide individually. If you'd like multiple slides to be displayed in a "Carousel" type effect, you can increase the number of Slides Per Page.

The "Slides per page" value determines how many slides will be on screen at any one time. Once the slider reaches the end it will either Rewind, Stop, or Loop depending on which Slider Mode is selected.

When the slider is in Slide mode you can select from our library of animations for the slide transition, or disable the animation entirely. When in Loop mode or displaying multiple Slides Per Page, only "Slide" or "No Animation" can be selected.

Note that animations do not play in the editor - they do, however, play on the Live page or in Preview.

You can toggle on and off displaying the Arrows to the side of the slider, and the dots beneath it, as well as set the color of both. Note that if both Dots and Arrows are disabled users will have no way to transition slides manually, so we recommend turning on Auto Slide if you turn both of these off.

By default, the slider has a frame around the content around it to keep the controls separate. If this setting is toggled on this frame is removed and the Dots and Arrows will appear directly on top of any content inside the Slider, unless they have been disabled.

The frame is transparent and so will by the same color as your page's background - if you wish for the frame to be colored you can place the slider inside of a Container element and set a Background.

By default, the slider will not progress until the user interacts with it. If you'd prefer that it progresses automatically, turn on Auto Slide. You can then configure how long each slide appears for, and whether or not the timer for the next transition stops when the user is hovering their cursor over the slider.

To get started with the Slider Element, simply drag one onto your page. You will immediately notice that you can go on to insert other elements right into the Slider Element.

The slider element has a few unique controls that appear when you hover over it in the editor:

The left and right arrows will move the current slide forward and backward in the slide order respectively. The + button will add a new empty slide, while the - button will remove the current slide from the slider.

To insert elements into your Slider Element, simply go ahead and drag them into the slide that you would like.

You can customize the amount of slides in your Slider Element depending on your needs.

You can allow your Slider Element to automatically change every few seconds when your visitor is on your page. Simply toggle the Auto slide option in the right-hand menu.

You can even set the amount of seconds that the Slider Element will change the slides at.

There are a few options that are available for customizing your Slider Element.

You can choose whether or not to show the arrows on the left and the right of Shogun. You can simply toggle this in the right-hand menu of the editor.

You can also choose to show the dots at the bottom of the Slider Element or not. This allows your visitor to see how many slides are in the Slider and also allows them to navigate between slides.

The slider element has a few unique controls that appear when you hover over it in the editor:

The left and right arrows will move the current slide forward and backward in the slide order respectively. The + button will add a new empty slide, while the - button will remove the current slide from the slider.