Slick slider and responsive content

The brief: A slider that looks great on all devices: more thumbnails per slide on a larger screen.

The solution: When I was designing this site (as with any site these days), responsive web design (with it’s roots in Ethan Marcotte’s classic article) was firmly in my mind. I’m keen on sending the same content to all devices, not different information for mobile devices – styled appropriately for every device’s screen of course, but the same actual content.

But there are always exceptions to a rule (and it’s not really a rule, more of a general intention), so here’s why this one breaks the rule (or general intention…): on the home page and design pages, I wanted a mobile to see a single screenshot on one slide, a description on the next; on a portrait tablet, those two slides side-by-side; landscape tablet – maybe two screenshots per project plus a description; on a desktop, three screenshots plus description.

For the slide show I’m using Ken Wheeler’s excellent Slick, it’s wonderfully simple to implement and well documented. Slick allows for some responsiveness by way of setting how many elements are shown per slide at different breakpoints, so this took care of mobile up to portrait tablet.

1 slide - 4 items

The BUT: The example above shows the desktop view, though Slick’s settings would allow two items per slide for a portrait tablet, it would show items 1 and 2, when I want to show items 1 and 4; on a landscape tablet I want to show 1, 2 and 4, Slick would automatically show 1, 2 and 3. So clearly something more is needed.

The BUT solution: After a lot of trial and error I opted for response.js, a jQuery plugin which allows you to dynamically swap content based on breakpoints and data attributes. So in the HTML, items 1 and 4 are available for all sizes, item 2 gets added by response.js via a data attribute at 1024px, and item 3 gets added at 1400px.

How? Well after linking to the response.js file (after jQuery of course) you add this to your body tag:

data-responsejs='{ "create": [{ "prop": "width", "prefix": "min-width- r src", "breakpoints": [0, 641, 961, 1024, 1400] }]}'

or whatever breakpoints you want. Then within the Slick slider elements (each <li> is an element used in the slider):

<li><data-min-width-1024='<img src="/img/slick/design/mob-tab-gen.png" alt="Generic tablet & phone">'</li>

That image will then get added if the viewport is 1024 or wider. I tried putting the <li> tags within the data attribute instead but it didn’t work. This caused a problem; because at less than 1024px there was now an empty <li>, Slick would count this and leave an empty space for the image – not good. CSS display:none is no good as it’s still there in the HTML, so still counted by Slick.

So I decided to remove the empty <li> with jQuery. There are several ways to remove items based on media queries, but I found a neat solution at Forefront which looks for a media-query change and fires your jQuery command when it happens, guaranteeing the change happens when the media query does. So adding a display:none to the list items that would be empty seemed logical, and then firing the .remove in javascript when the media query display:none happens (it’s instant), and also making sure that bit of javascript loads before Slick so that it can’t count the empty <li>.

And finally: There’s a saying that only web designers adjust their browser size – but even if that’s true, I knew there was a chance people would do that, especially when I’m blogging about it, so I had to add a little js to make sure the page reloads if the browser is resized so that the correct number of thumbnails get shown for the viewport size.

var lastWidth = $(window).width();

lastWidth = $(window).width();

There’s a compromise in that, because a user might be annoyed by the refresh if, say,  they rotate their tablet, but if the content is optimised enough, the refresh is fast, so I thought it was worth the trade-off.

In the next post I’ll explain getting the lightbox connected to the slider to show mobile screenshots to a mobile; and desktop screenshots to a larger viewport.

Leave a Reply

Your email address will not be published. Required fields are marked *