Slideshow
Show a collection of items one at a time.
Projects /
Projects /
Show a collection of items one at a time.
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:
data-swipe="on" to the js-slideshow element (default is off);data-autoplay="on" to the js-slideshow element (default is off). Autoplay is automatically paused when user hovers over the slideshow element, interacts with the slide contents or the slideshow navigation/controls;data-autoplay-interval equal to the custom duration (in milliseconds) that you want to use (default is 5000). This option is effective only if data-autoplay is on;data-autoplay-hover="on" to the js-slideshow element (default is off). This option is effective only if data-autoplay is on; data-autoplay-focus="on" to the js-slideshow element (default is off). This option is effective only if data-autoplay is on; data-navigation="off" (default is on); this will remove the navigation dots that allow to access a specific slide.data-controls="hover" to the js-slideshow element. By default, the arrows are either always visible or always hidden, depending on whether they're in the HTML structure or not. If you include them in the HTML structure, data-controls="hover" will make them visible only when the users move their mouse over the slideshow.To modify the height of the slideshow element, use the --slideshow-height CSS variable:
:root {
--slideshow-height: 280px;
@include breakpoint(sm) {
--slideshow-height: 380px;
}
@include breakpoint(md) {
--slideshow-height: 480px;
}
@include breakpoint(lg) {
--slideshow-height: 580px;
}
}If you want to create a slideshow with a fixed aspect ratio, add one of the .slideshow--ratio-{ratio} classes to the .slidewshow element (see the --fixed-ratio variation demo):
.slideshow--ratio-16:9.slideshow--ratio-4:3.slideshow--ratio-1:1You can create different .slideshow--ratio-n:m classes for additional aspect ratios (make sure to use the proper padding-bottom value).
If you have an image-only slideshow and you want to preserve the aspect ratio of the slides, add one of the .slideshow--ratio-{ratio} classes, as explained in the Slideshow height section.
⚠️ Note: make sure to set your images as background-image to the .slideshow__item elements.
By default, there's no animation when switching from one slide to another.
You can change the transition animation adding one of the following classes to the .slideshow element:
slideshow--transition-slide: slide-in/slide-out effect;slideshow--transition-fade: fade-in/fade-out effect;slideshow--transition-prx: parallax slide-out effect.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.
You can read more about creating color themes with the CodyHouse framework on our Colors documentation page.
You can customize the slideshow navigation using the following data attributes:
data-navigation-class: pass a list of custom classes to be added to the navigation element (default is slideshow__navigation);data-navigation-item-class: pass a custom class for the navigation list items (default is slideshow__nav-item). When an item is selected, the class {navigation-item-class}--selected is added to that element (e.g., if data-navigation-item-class='slideshow__navigation-item', the selected class will be slideshow__navigation-item--selected).If you need to detect the selection of a new slide item, you can use the following custom events:
newItemSelected: triggered when a new slide has been selected. The index of the selected item is passed using the detail property of the custom event;newItemVisible: triggered when a new slide transition is completed.
var element = document.getElementsByClassName('js-slideshow')[0];
element.addEventListener('newItemSelected', function(event){
// new slide has been selected
console.log(event.detail); // selected item index
});
element.addEventListener('newItemVisible', function(event){
// new selected slide has completed its transition
console.log(event.detail); // selected item index
});You can use external triggers (e.g., a button element) to select a specific slide in your slideshow; add to the trigger element a data-controls attribute equal to the id of the .js-slideshow element and a data-index equal to the index of the slide you want to show:
<div id="slideshow-1" class="slideshow js-slideshow">
<!-- slideshow content here -->
</div>
<button data-controls="slideshow-1" data-index="2">Show slide 2</button>You can also use the selectNewItem custom event to show a specific slide element:
var slideshow = document.getElementsByClassName('js-slideshow')[0]; // slideshow element
var event = new CustomEvent('selectNewItem', {detail: 4});
slideshow.dispatchEvent(event); // reveal slide 4If your slideshow content is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.
Once the dynamic content has been added to the page, initialize it using the Slideshow object:
var slideshowEl = document.getElementsByClassName('slideshow')[0];
new Slideshow({
element: slideshowEl,
navigation: true, // show dots navigation
autoplay : false, // enable/disable autoplay
autoplayInterval : false, // in milliseconds - default is 5000 (5s)
autoplayOnHover: false, // do not pause autoplay on hover
swipe : false // enable/disable swipe
});
