DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Vadim Filimonov
Vadim Filimonov

Posted on

Creating a simple slider in Drupal 8

Install and enable the slick views module:

composer require drupal/slick_views ; drush en slick_views -y ; drush en slick_ui -y
Enter fullscreen mode Exit fullscreen mode

The Composer will find and install additional modules by itself: slick, slick ui.

Go to the Status Report page:

/admin/reports/status
Enter fullscreen mode Exit fullscreen mode

Slick requires the installation of libraries.

Image description

In the terminal, go to the folder libraries, which is in the root of the site.

cd ~/user/site/libraries
Enter fullscreen mode Exit fullscreen mode

If it does not exist, then create it.

mkdir ~/user/site/libraries
Enter fullscreen mode Exit fullscreen mode

Go to each library page, click Clone or donwload and copy the path:

Image description

While in the libraries folder, clone the libraries:

git clone https://github.com/dinbror/blazy.git ; 
git clone https://github.com/kenwheeler/slick.git
Enter fullscreen mode Exit fullscreen mode

Go to the Slick module settings page and make a duplicate of the template.

/admin/config/media/slick
Enter fullscreen mode Exit fullscreen mode

Image description

Change the name and machine name and save it immediately. For a simple slider, the standard settings are enough.

Create a new view and change the format from Unformatted List to Slick Carousel.

Image description

Click the Vanilla Slick checkbox, change the Optionset main to the Slider you created earlier, and save it.

Image description

In the settings of the view specify what to output, how much and how:

I output articles, two pieces in the display mode announcement.

Image description

Save a view.

Result in the Bartik theme

Image description

That's all. If you need a carousel of several columns or even rows, you can change their number in the Optionset settings yourself.

Top comments (0)

About Real-time

Join DEV and MongoDB to build a front-end application using MongoDB Atlas. Change streams to display live updates as your database changes for your entry in the DEV x MongoDB Atlas Hackathon 2022.

→ Join the Hackathon