Browse cities

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:
 

1. Views Slideshow    

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

3. Owl Carousel

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
     

4. jCarousel

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

Photo by Samuel Zeller on Unsplash

Development

We do Drupal development

Go to our Drupal page!

Visit page!

Recommended Stories

What’s New in Drupal 9? Any Game-Changing Features to Expect and... Prepare for?
These days, this is the question on the lips and minds of anyone developing/designing/creating content in Drupal… (Read more)
Adriana Cacoveanu / Sep 19 '2019
React.js vs Node.js: What Are the Main Differences? Which One to Choose for Building Your Next Web App?
They're both widely used, subsets of JavaScripts, high performing and yet... they're technically different. But… (Read more)
RADU SIMILEANU / Aug 1 '2019
Best of July: Top 5 Drupal Blog Posts that We Have Bookmarked this Month
It's that time of the month again! The time when we express our thanks to those Drupal teams who've generously (… (Read more)
Adriana Cacoveanu / Jul 31 '2019