Go to homepage

Projects /

Preview-Mode Slideshow

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

View Demo

Dependencies

All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

To use this component, include the following dependencies:

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:

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

🏙 Demo photo by Sean Sinclair on Unsplash

Categories

Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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