Menu
Styleguide Logo

Slider Options

This page will detail how to edit options for sliders, including adding custom buttons.

The slider has default options that work well and is responsive, but you may want to change some of them.

See this page for all available settings.

slider class

Many widgets already have a slider pre-built, but you may want to make any images or icons be a slider.
Add a "slider" class to any element.

SHOW CODE

 

slide count

By default, the slider displays one slide at a time. If you are using bootstrap classes such as col-md-6, the slider will use those classes to determine the number of slides to show.
If bootstrap is not used, you can set the number of slides from the following classes: two-block, three-block, four-block, five-block.

SHOW CODE

 

fade

To make the slides fade instead of slide, add "data-slick='{"fade": true}'" to an existing slider element.

SHOW CODE

 

center mode

Display slides centered in the middle, to give more focus to some slides.

SHOW CODE

 

custom arrows

You can add custom arrows to your slider. Using css you can position and style it many different ways.

You will need to look at the code, to see the structure of the buttons. They are prepended before the slider. Both the slider and arrows need to be inside a container.
You will also need to add a "controls" class and a "custom-buttons" class to the slider element.

SHOW CODE