🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Slideshow

Show a collection of items one at a time.

Copy: View demo

Dependencies

All components are based on CodyFrame.

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 their HTML.

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:

  • enable swipe on touch devices: add a data-swipe="on" to the js-slideshow element (default is off);
  • 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;
  • 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;
  • remove slideshow navigation: add a data-navigation="off" (default is on); this will remove the navigation dots that allow to access a specific slide.
  • show 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.

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

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.
If you want to create a parallax slide-out effect, add the slideshow--transition-prx class to the .slideshow element. 

Image Slideshow #

Each slideshow item has a fixed height (that changes at different breakpoints).

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

⚠️ Note: make sure to set your images as background-image to the .slideshow__item elements.

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:

  • 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

Categories

✅ Project duplicated

✅ Project created

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