Slider

There are three slider types in Act2: a basic slider using the Image Gallery module, an advanced drag-and-drop component for a better customization and content choices and a custom module (Hero Slider) described on its own page here.

Basic

A quick and easy to use slider that you can implement using an Image Gallery module with this class: slider-type-1

Act2 Slider Type 1 Sample

Act2 Template Builder Image Gallery Module Edit CSS

Act2 Template Builder Slider Type 1 CSS Class

By default the slider dots (pagination) is placed in the center. If you want to change that you can add one of the two classes: dots-left or dots-right

Example:

Act2 Template Builder Slider Type 1 Dots Left CSS Class

Act2 Slider Type 1 Dots Left Sample

If you want to place the pagination below, just add this class: pagination-below

Act2 Template Builder Slider Type 1 Pagination Below CSS Class

Act2 Slider Type 1 Pagination Below Sample

You can pre-populate the slider at the template level using the module options:

Act2 Template Builder Image Gallery Edit Options

Act2 Template Builder Image Gallery Add Slides

In the Gallery Options, please make sure Standard slider is selected:

Act2 Template Builder Image Gallery Module Standard Slider setting

If you want to add captions, the Caption Position must be set to Superimpose captions on top of images:

Act2 Template Builder Image Gallery Caption Position Superimpose

Add captions like this using paragraphs, quotes or headings (watch the video below; the process is similar in the page editor):

Advanced

For more options, a better customization and content choices you can use the advanced drag-and-drop slider. You basically need to add a group with a few classes, including the base class slider-container and each direct-child row in that group (either module or group) will be converted to a slide:

Act2 Template Builder Slider Container Edit CSS

Act2 Template Builder Slider Container CSS Class

It is possible to add these classes to a Flexible Column module, instead of a group, and add modules (slides) at the page level, but you will not have the option to add classes to those modules, or use groups or multi-rows, but just plain modules, each one interpreted as a slide.

Options and configuration

The slider-container class doesn't do too much on its own, although the slider is there. For the slider to behave accordingly and for the many configurations, we must add additional classes. We'll explain each one of those classes below.

Before getting started here are a bunch of classes that you can use to provide the slider with the basic functionality:

slider-container infinite autoplay arrows dots

Act2 Template Builder Slider Container CSS Classes

Infinite

Slider loops continuously:

infinite

Autoplay

Auto start slider automatically:

autoplay

Adaptive Height

Adjusts the slider container height to the active slide instead of the tallest. The slider height will automatically change if the slides have different heights:

adaptive-height

Arrows

Adds navigation arrows to the slider. This class is required for all the modifier classes in the table below:

arrows
CSS Class Description
arrows-hover Shows the navigation arrows only when the mouse hovers the slider
arrows-white Makes the arrows white
arrows-outside Places the arrows outside the slider container. If the arrows go outside the viewport, you can add padding and overflow utility classes to the content section. Example: plr80 sm-plr20 ovh
arrows-tap A bolder arrows design
md-no-arrows Hides the arrows on screens smaller than 1140px
sm-no-arrows Hides the arrows on screens smaller than 768px
xs-no-arrows Hides the arrows on screens smaller than 480px

Dots

Adds pagination to the slider. This class is required for all the modifier classes in the table below:

dots
CSS Class Description
dots-below Places the dots below the slider
dots-white Makes the dots white

Fade

Enables fade animation:

fade

Autoplay Speed

Autoplay speed in milliseconds. Default is 3000. You can replace 3000 with a different number:

autoplay-speed-3000

Animation Speed

Slide/fade animation speed in milliseconds. Default is 300. You can replace 300 with a different number:

animation-speed-300

Pause On Hover

Pauses the slideshow on hover:

pause-on-hover

Slides To Show

Number of slides/columns to show at a time. Default is 1. Replace 1 with a different number. If you also enable the Center Mode, please choose an odd number (e.g. 3):

slides-to-show-1

You can reset the slider to a normal view on smaller screens, with a single slide being visible at a time, by adding one of the stack classes below:

CSS Class Description
md-stack Viewport smaller than 1140px
sm-stack Viewport smaller than 768px
xs-stack Viewport smaller than 480px

Slides To Scroll

Number of slides/columns to scroll when navigating between slides. Default is 1. Replace 1 with a different number. Obviously, this should not be larger than the number of Slides To Show:

slides-to-scroll-1

Center Mode

Enables centered view with the active slide being in the center and a bit larger than the rest:

center-mode

You can reset the slider to a normal view on smaller screens, with a single slide being visible at a time, by adding one of the stack classes below:

CSS Class Description
md-stack Viewport smaller than 1140px
sm-stack Viewport smaller than 768px
xs-stack Viewport smaller than 480px

Center Padding

Side padding (space between slides/columns) when in center mode, expressed in pixels. Default is 50. You can replace 50 with a different number:

center-padding-50

Slides Vmiddle

Centers slides/columns vertically:

slides-vmiddle

Variable Width

Variable width slides:

variable-width

Not Draggable

Disable mouse dragging:

not-draggable

Not Swipeable

Disable swiping:

not-swipeable

Vertical (experimental)

Vertical slider (not fully styled, for advanced users):

vertical

Vertical Swiping (experimental)

For vertical sliders (not fully styled, for advanced users):

vertical-swiping
Using Act2.1 with the new Design Tools? Read this documentation.