Using the slider controller blocks

In this tutorial we’re going to cover how you can use block slider controller blocks to control your slider explicitly.

Types of slider controllers

Block slider currently offers 2 different types of slider controller blocks:

  1. Next/Previous Controls
  2. Pagination Controls

Let’s go through each slider controller block and learn how you can use them in your next slider.

Next/Previous Controls

Next/Previous controls allows user to slide to a desired slide when clicked on the button.

using next/previous controller blocks

Inserting a navigation block?

In block slider, a slider controller block is inserted using a “Slider Controller” block.

Inserting the navigation block

Types of navigation blocks

types of navigation blocks

At the time of this tutorial, there are currently 4 types of navigation controls available:

  1. Next Control
  2. Previous Control
  3. Last Control
  4. First Control

All of the above controller blocks are pretty self-explanatory. Lets go through each one of the navigation control in details

Next Control

Takes the user to the next slide when the “next control” navigation button is clicked.

Previous Control

Takes the user to the previous slide when the “previous control” navigation button is clicked.

Last Control

Takes the user to the last slide when the “last control” navigation button is clicked.

First Control

Takes the user to the first slide when the “first control” navigation button is clicked.

Pagination Controls

using dot pagination

Pagination controller blocks allows user to specifically jump to a certain slide.

Inserting a pagination controller

You can also insert a pagination controller block using the “Slider Controller” block.

inserting the pagination controller

Types of pagination controllers

Currently, block slider offers 6 types of pagination controller blocks

  1. Dot Control Pagination
  2. Number Control Pagination
  3. Upper Alphabets Control Pagination
  4. Lower Alphabets Control Pagination
  5. Upper Roman Control Pagination
  6. Lower Roman Control Pagination

Let’s go through each one of the pagination controller in details.

Dot Controls

A dot control pagination consists of a dot representing each slide in a slider, It will navigate the slider to it’s respective slide when the user click a certain dot.

Number Controls

A number control pagination is similar to the dot control pagination, with the only difference of including slide index inside the dot.

Upper Alphabets Controls & Lower Alphabet Controls

Upper alphabets control
Lower alphabets control

These another 2 types of pagination controls are pretty similar, these pagination controls includes an alphabetic representation of the current slide inside with a difference of alphabet cases.

Upper Roman Controls & Lower Roman Controls

Upper roman control
Lower roman control

Grouping another two types of pagination controls, these pagination controls includes an roman counts of the current slide inside with a difference of roman cases.