Comprehensive guide on building and styling drupal 7 carousel with slick_views

Adedapo Ajuwon

4 min readNov 16, 2017

Tutorial type:

This tutorial assumes you have the basic understanding of how to install modules with drush

Navigate views and create block display

Configure drupal 7 block system

Purpose

By the end of this tutorial you will be able to create a carousel just like the image above and not only that, you will learn how to get a clean html output from your views so you can effectively style your views with CSS.

I have checked other slick views tutorial, and I was perplexed with the way they came up with the final result, I promised to make this comprehensive, although I will not follow the baby step on enabling modules and installing drupal, that’s why I have clearly stated from the beginning the type of users I am writing for, without further ado, Shall we?

Install slick carousel and dependencies

drush en slick –yDrush en slick_ui

Drush commands above will download, install slick and enable slick ui so you have access to the user interface at admin/config/media/slick

Download slick css and javascipt

Navigate to your libraries folder at, sites/all/libraries/slick/slick/

Git clone https://github.com/kenwheeler/slick.git

You should have this kind of file structure in your library

….sites/all/libararies/slick/slick/slick.css

….sites/all/libararies/slick/slick/slick.js

Heads up: to verify that you have correctly positioned your slick files, navigate to admin/reports/status to check if slick is perfectly installed

Create a content type

Give your content type listing and add the following fields to it

Populate your content type, you can add up to 8 nodes to the content type

Configure slide

Head over to admin/config/media/slick and lets configure our slideshow, you will see a default slideshow, don’t bother changing it, let’s use it for our tutorial, click on the edit link under operation and configure your slideshow like the image below, if you are not getting it right, I have also exported the settings to my github gist https://gist.github.com/dapseen/ef3deee366d65571460e88ce0202e61a

Create views block display

Enable block and don’t forget to make display format slick carousel of fields

Add fields to block

Configure your slick carousel settings in views to look like image below

You should now see your carousel in the auto preview pane in views.

Rewriting result to give a clean HTML

we are almost done

Views generate large chunks of HTML we don’t need, we can rewrite our views result and have a clean html output, if you are not familiar with rewriting views result, I will show you one part and you can follow suite.

I will go ahead and rewrite photo fields results

Step 1: click on EXCLUDE FROM DISPLAY

Step 2: Click on multiple display settings, delete “all” in the input and replace it with “1”. This will ensures it display one image

What we are trying to achieve here is to reduce the number of image that will be displayed to 1 and prevent the photo from showing, yeah, we will print it in another field. I want you to go ahead and do that for other fields, (title, price, bathrooms, bedrooms, state).

Note my last field, its post date, i.e that day the content was created, go ahead and click on your last field, and follow the step below

Step 1: you don’t need to exclude display on your last field

Step 2: configure your STYLE SETTINGS like image below, remember, what we are trying to achieve is to remove unwanted html tag and have our own custom html structure that we can easily apply CSS

Step 3: click on rewrite result, don’t forget to click on rewrite output of this field. I am going to click replacement pattern to see tokens that are available to me.

Make sure you are editing the last field to see all replacement patterns for your fields