Introduction

A lot of websites have a slider (or carousel). Most of them in the header. The big question is: Should I use a carousel? If you decide you should… this page shows you how to use a decent one. The carousel is based on this pure CSS carousel with plenty of options. Content is stored in YML in the data directory. Design decisions are stored in the include variables.

How it works

The code allows you to set the height of the slider as an integer (number), and the unit in as ‘%’ or ‘px’. You can define how long each slide should stay on the screen (in seconds). An interesting feature, is the option to make the slider responsive. If you set the height to ‘50’ and the unit to ‘%’, the dimensions will always be 2:1, but the height will vary. If you set the height to ‘300’ and the unit to ‘px’ the height will always be the same, but the dimensions will vary. Note that the CSS in this script replaces the default icons for big HTML arrows and uses background images to ensure that the slider maintains the same height. For the second carousel on the samen page you should use “2” for the number. Click the ‘read more’ link for a demo.

[expand]

[/expand]

Installation

Step 1. Download the file carousel.html
Step 2. Save the file in the ‘_includes’ directory of your project
Step 3. Add this to your layout:


  {% include carousel.html height="50" unit="%" duration="7" number="1" %}

  {% include carousel.html height="50" unit="%" duration="7" number="2" %}

Step 4. Create a YML array called ‘carousels’ in your front matter with this content:

carousels:
  - images: 
    - image: /uploads/slider/image1.jpg
    - image: /uploads/slider/image2.jpg
    - image: /uploads/slider/image3.jpg
    - image: /uploads/slider/image4.jpg
  - images: 
    - image: /uploads/slider/image5.jpg
    - image: /uploads/slider/image6.jpg
    - image: /uploads/slider/image7.jpg
    - image: /uploads/slider/image8.jpg