On a local project with the business directory site Ecoparker, we experienced the struggle of displaying a long list of products in small display screens ie mobiles.

On this particular landing page, showcasing Solforest a vertical forest real estate project, we need to present 10 types of apartments in two categories with sizes and selling prices.

Solforest list of apartments

On another page, we have 6 categories, each category has more than 10 products. If we just display them all one by one on top of each other, like it will become too long.

Solforest list of apartments too long

It is not bad, but when there are too many, users would scroll and sometime later wouldn't know where they were.

Our solution is to group products into categories and displaying them on carousels, like this:

Solforest list of apartments in carousels

It is more mobile friendly. Users can use their thumbs to swipe left and right to find different products, and swipe down just a little bit to compare them with the below categories.

Now let's go on and explore how to make it with Slick in Drupal

1. Installation

You need to install:

The reason we choose Slick is because it is well maintained and powerful, many options can be configured via UI, which is easier for administrators.

2. Configure Slick UI

Now please go to Admin - Configuration - Media - Slick, add a new Slick optionset, I called it Grid-4.

We created two breakpoints for responsive display:

  • Desktop screen (980px): show 4 items per row
  • Mobile screen (768px): show 2 items per row

Slick optionset configuration

Settings pretty much the same for those two options, just different in the number of slide to show. You can do experiments with your own settings.

3. Create a view

Now create a new view as usual, for the Format, please choose Slick Carousel.

Slick view configuration

And click on Settings link beside, select the optionset for it.

Slick view configuration

4. The CSS stuffs

Ok we display products in carousel on mobiles. But what if users don't know there are more on the right? The trick is showing a half of the next product, so they know there still more to swipe.

We can do that just by adding a little piece of CSS code:

@media screen and (max-device-width: 480px) and (orientation: portrait) {
  .slick-list { 
    padding:0 20% 0 0;

5. The results

Voila. Now enjoy the new display in desktops.

Solforest list of apartments in desktops

And in mobiles

Solforest list of apartments in mobiles

Hope you enjoy it.


Subscribe to our mailing list

* indicates required