Preview-Mode Slideshow

Show a collection of items one at a time with a preview of the next/previous elements.

Dependencies

• Swipe Content

How to

The Preview-Mode Slideshow component is used to cycle through a list of content. A single list item is shown at a time, while a preview of the previous/next items is provided.

The content of a single item could either be text or image (you can check the HTML of the component demo).

To change the size of each item in the slideshow, you can update the --slideshow-pm-item-width css variable: by default, it is 80% on devices smaller than 1024px, 66% on bigger devices.

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-pm element (default is off);
• autoplay: to enable autoplay, add a data-autoplay="on" to the js-slideshow-pm 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;
• 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;
• item preview: to navigate the slideshow when clicking on item previews, add a data-pm-nav="on" (default is off).

Slideshow Dots Navigation #

You can customize the slideshow navigation using the following data attributes:

• data-pm-nav-class: pass a list of custom classes to be added to the navigation element (default is slideshow-pm__navigation);
• data-pm-nav-item-class: pass a custom class for the navigation list items (default is slideshow-pm__nav-item). When an item is selected, the class {pm-nav-item-class}--selected is added to that element (e.g., if data-pm-nav-item-class='slideshow-pm__navigation-item', the selected class will be slideshow-pm__navigation-item--selected);
• data-pm-nav-btn-class: pass a custom class for the navigation buttons (default is slideshow-pm__nav-btn).

🏙 Demo photo by Sean Sinclair on Unsplash

Categories

• Plugins > Slideshow

Bug report & feedback

Component Github page ↗