Back to the list

Slideshow

Slideshows are a nice way to show images or changing content.

File to include

@import "components/slideshow";

Script to include

<script src="/lib/slideshow.js"></script>

With controls and pagination

1
2
3
4 
<div class="slideshow" data-controls data-pagination>
    <div class="slide">
        <img src="path/to/image.jpg" alt="Alt" />
    </div>
</div>

Automatic

1
2
3
4 
<div class="slideshow" data-autoplay="2000">
    <div class="slide">
        <img src="path/to/image.jpg" alt="Alt" />
    </div>
</div>

Attributes

Name Example value Possible values Default Required
data-autoplay 3000 - 1000, which is the default if there is no controls or pagination No
data-controls - - None No
data-pagination - - None No