Built with Readz

Slideshows

IMAGES & IMAGE STYLING

Overview / Intro

Media Library

Slideshows

Page Backgrounds

How Images Are Optimized

< BACK TO OVERVIEW

Slideshows, or sliders, are a well-used and loved part of many layouts. In Readz, we offer you two types of sliders: an image slider and a content slider.

This article will explain more about these two sliders and the options available to you with these sliders.

Image sliders vs content sliders

What is the difference between an image slider and a content slider?

The difference is in the name itself. An image slider will only handle images (and captions) while a content slider will allow you to add other content like text elements, on a slide. Here are two examples to illustrate the difference:

Above is an image slider. You can only add images and captions. It is a straightforward, easy option and in most cases, the best solution.

This is a textbox which can be added on a slide.

And here we added an image next to the texbox.

Above is a content slider. You can not only add images but also text boxes and more. Every slide is like a mini-canvas. You have more options, but it will require more work and styling.

Adding and deleting slides

To add or delete slides:

- select the slider

- access the slider properties panel on the left side of the panel

- select plus (+) to add slides, minus (-) to delete slides

Navigating your slider

In the top of the Slider Properties panel, you will find buttons to move to the previous or next slide. Alternatively, you can select specific slides from within the index in the right panel.

Slider options

Both types of sliders offer a wide choice of options:

autoplay
infinite loop
add captions (this one is image slider only)
add arrows
add dots for slide navigation
change slide animation, duration and easing settings
change the amount of slides per view
offer a peek of previous and next slides

We will go more in-depth on each of these options below.

To access the options, select a slider and click the gear icon on the left side panel.

Autoplay

With autoplay, your sliders will automatically switch between the slides. You can control the 'delay to start' - which is the time before the first slide will switch out, and the 'slide duration', which is the time each slide will stay on screen before switching out.

Infinite loop

With the infinite loop setting, you can control whether your slider will stop at the last slide, or if it will go back and show the first slide again if the next slide button is clicked or if autoplay is on.

Captions (image slider only)

You can captions to image sliders by turning the selection ON in the slider properties.

The captions will appear under the image. You can edit the captions in the canvas, and also style these using the Styling panel on the left. Note that changing styling for a single caption will apply the styling to all captions in that image slider.

You can also change the position of the caption using drag and drop, or the layout panel, and apply hover effects on it.

Arrows

Your slider can show arrows to move to the next or previous slide.

You can turn this option on or off, and also choose to have the arrows displayed only when the reader hovers over the slideshow.

You can change out the default arrow icons by selecting the arrow icons on the canvas or in the index, and then changing the icon within image properties. Also, other styling and sizing options are available from the other tabs, like all other content elements.

Dots

Dots are often used to add some animation and navigation to your slider. You can add dots to your slider from within the slider properties panel.

You can change some styling options by selecting the dot element and opening the styling tab in the left panel.

Slide transitions

You can change the transitions for your slider:

Animation: Slide or fade

Transition duration: set the timing

Transition: Ease in / ease out / ease in-out / linear

Arrows

Your slider can show arrows to move to the next or previous slide.

You can turn this option on or off, and also choose to have the arrows displayed only when the reader hovers over the slideshow.

Contact Support