Developing a content slider

Content sliders are very popular components in website design. Most websites have a slider on the homepage to highlight important content within a limited space. impress.js is developed in a way that we can add new custom functionality with ease. Presentations can easily be converted to content sliders with minimum customizations.

Throughout the next section, we are going to build a fully functional content slider from scratch.

Planning the design

Sliders contain steps with HTML contents. This is similar to what we did in previous presentations. But this time, the slider will be created inside a container with predefined dimensions instead of fullscreen. Let's now take a look at the common functionalities of a slider before we get started:

• Slides play automatically

• Navigation controls for previous and next slides

• Play/pause functionality

• Slide numbers for direct traversing

• Highlights the active slide number

Here is a preview of the slider we are going to develop in this...