Go to homepage

Projects /

Slideshow

Show a collection of items one at a time.

View Demo

Dependencies

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:

  • swipe: to enable swipe on touch devices, add a data-swipe="on" to the js-slideshow element (default is off);
  • autoplay: to enable autoplay, add a 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;
  • autoplay interval: to set a custom autoplay timing, add a 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;
  • autoplay on hover: if you do not want to pause autoplay when hovering over the slideshow, add a data-autoplay-hover="on" to the js-slideshow element (default is off). This option is effective only if data-autoplay is on; 
  • autoplay on focus: if you do not want to pause autoplay when a slideshow element is in focus, add a data-autoplay-focus="on" to the js-slideshow element (default is off). This option is effective only if data-autoplay is on; 
  • slideshow navigation: if you want to remove the slideshow navigation (dots navigation), add a data-navigation="off" (default is on); this will remove the navigation dots that allow to access a specific slide.
  • slideshow arrows: if you want to show the arrow controls on hover, add 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.

Slideshow height #

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:1

You can create different .slideshow--ratio-n:m classes for additional aspect ratios (make sure to use the proper padding-bottom value).

Image Slideshow #

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.

Slideshow Transitions #

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.

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

Slideshow Dots Navigation #

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).

Custom Events #

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
    });​

External Controls #

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 4

Dynamic Content #

If 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
});

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.