Slideshow

Show a collection of items one at a time.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

If you're using this component, you should also include the SCSS/JS of the following components:

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How To

Slideshows are elements that allow you to cycle through a series of content (images, text, etc.).

You can edit the following data attributes to customize the slideshow behavior:

Slideshow Transitions

By default, there's no animation when switching from one slide to another.

If you want to add a slide-in/slide-out effect, add the slideshow--transition-slide class to the .slideshow element.
If you want to switch to a fade-in/fade-out effect, add the slideshow--transition-fade class to the .slideshow element.

Slideshow Controls/Navigation theme color

You can apply a color theme to each slide, just like you would with all our components: you can generate a new color theme using the Color Editor, and then apply it to a .slideshow__item element using data-theme="themeName".

For example, you can create a "dark" color theme that will edit the background color and update all the text elements applying a light color. Not just that! Our plugin will automatically update the theme of the slideshow controls (equal to the theme of the current slide) so that their visibility is not affected.

data-themes applied to slides
Example of data-themes applied to slides

You can read more about creating color themes with the CodyHouse framework on our Colors documentation page

Custom Events

If you need to detect the selection of a new slide item, you can use the following custom events:

Changelog

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news