Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

What Are the Best Solutions for Creating a Slider in Drupal? 4 Drupal 8 Slideshow Modules

Parent Feed: 

Do you need to set up a custom image carousel? Or maybe one slider with a teaser, displaying content from your website? What are the best Drupal 8 slideshow modules to consider for implementing and maintaining your slideshow?

And out of the box options are... out of question, right? Your requirements are too specific for that.
Maybe you need:
 

  • a certain number of slider items
  • different arrow designs
  • to display the image slideshow on other pages, too, not just on your homepage
     

With such flexibility and customization requirements in mind, we started digging into the “pile” of Drupal 8 image slider modules.

And here are the 4 ones that we've selected, those with the best reviews in the Drupal community:
 

If it's a fully customized slideshow that you want to implement, Views Slideshow's the module you need.

It'll “spoil” you with tons of add-ons to select from and give your unmatched flexibility. From:
 

  • titles
  • to images
  • to teasers of the last X blog posts on your website
     

… you get to include any type of items in your carousel.

Furthermore, it's jQuery-powered and it allows you to configure different settings for each one of the views that you'll create.

Note: oh, yes, you'll need to be pretty comfortable using Views in order to leverage this module at its full capacity.

Some of its key features:
 

  • your slider can include and display the latest products added to your eCommerce website 
  • you can set up a news item slideshow (the latest X news articles published on your Drupal 8 website)
  • from the latest X blog entries to the latest videos, testimonials, forum posts etc., you're free to include any type of content in your slider...
     

Now, here's a very brief step-by-step on how you can set it up and use it to create your slideshow:
 

1.1. Install and enable the module

Once you've downloaded it from Drupal.org, installed and enabled it, make sure to download its corresponding ZIP folder on Github, as well.

Give your folder a new name  — /jquery.cycle/ — then start uploading all its files to the 
/libraries/ folder in the root of your Drupal website.
 

1.2. Set up your view

Time to create your slideshow now. For this, just go to Structure> Views>Add new view 
 

1.3. Publish your slideshow block

For this, go to Structure>Block layout and select the region on your website that you want your slider to get displayed on.
 

1.4. Create a new image style

As you can see, the images included in your slideshow are currently of different sizes. Therefore, they're not perfectly adjusted to fit the block region that you've chosen for your slider.

To solve this inconvenience, just go to Configuration>Image styles>Add Image style

There, you can create a new style, that will be shared by all the images included in your slideshow.
 

2. Slick Slider, One of the Most Popular Drupal 8 Slideshow Modules

Another one of Drupal's modules for creating custom image slideshows, that ships with a heavy load of options. Powerful and flexible... what more could you ask for from your slider solution?

Capitalizing on Ken Wheeler's Slick carousel, working perfectly with Views and fields, the Slick Slider module:
 

  • enables you to set up a slider including multiple views, value fields and paragraph types
  • comes with image, audio and video support
  • supports complex layouts, as well
     

Some of its key features:
 

  • you're free to enable/disable the swipe functionality
  • it's responsive (scales along with its container)
  • some of its layouts are CSS-built
  • it's designed to work with Field collection, Media, Views, Image (and also to work perfectly fine with none of these modules)|
  • it allows you to configure your own “slide selecting” dots, the arrow keys and your slider's navigation, as well
  • it provides modular and extensible skins
  • you get to choose how you want your slideshow to be scrolled: swipe, desktop mouse dragging, auto scroll, mouse wheel scroll...
     

Another one of those Drupal 8 slideshow modules that gets the best reviews.

Here's why:
 

  • it leverages the Owl Carousel slider built by OwlFonk.   
  • it, too, empowers you to customize your image slideshow; in this respect, it ships with a myriad of customization settings
  • it's responsive
  • it capitalizes on a small ecosystem of submodules: Administration UI, Views Style, Field Formatter
     

Some of its key features:
 

  • from customizing your events to styling your controls, it allows you to tailor your image slider to suit all your needs
  • it supports multiple sliders
  • touch events
     

A simple module to consider each time you need to display a group of images in a compact way on your website. It even allows you to set the number of items to be included in your carousel...

Speaking of which, you should know that jCarousel, as its name says it, allows you to leverage the jCarousel jQuery plugin.

For this, it ships with a developer API for other modules to access. Furthermore, it integrates with Views, so you can easily turn any list of images (or other type of content) into a slideshow...

Some of its key features:
 

  • jCarousel field formater
  • out-of-the-box Views support
  • API for using jCarousel without Views
  • a collection of modern skins to choose from
  • Carousel pager that enable users to jump between multiple sliders
     

The END!

These are the first Drupal 8 slideshow modules to consider when looking for the best method for setting up your custom image/content slider.

Packed with tons of customization options, feature-rich and powerful, these 4 solutions for creating image carousels in Drupal 8 should be on your short list when you start looking beyond the out-of-the-box options for putting together a slider...

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web