Cyber Monday Sale! 50% off themes, plugins, graphics, audio + video! Cyber Monday Sale! Download Now
Advertisement
  1. Web Design
  2. jQuery
Webdesign

How to Build an Attractive Responsive Image Gallery With slick.js

by
Difficulty:IntermediateLength:MediumLanguages:

In this tutorial we’ll use slick.js, a popular jQuery plugin, to build an attractive responsive image gallery. Here’s the gallery that we’re going to create:

Be sure to check the full screen version and resize your browser window to see how its layout changes depending on viewport size.

What is slick.js?

Slick.js is a well-known jQuery plugin created by Ken Wheeler that lets you build beautiful responsive carousels. To better understand what this plugin can offer you, check out the documentation.

Happily, it works not only in all modern browsers, but also in some older ones like IE 8+.

Lastly, you might want to have a look at the WordPress version.

Getting Started With slick.js

To get started with slick, begin by downloading and installing the following files in your project:

  • jQuery (≥1.7)
  • slick.css or its minified version
  • slick.js or its minified version

Optionally, you might want to import the slick-theme.css file.

You can grab a copy of the corresponding slick files by visiting its Github repo, by using a package manager (e.g. npm), or by loading the necessary assets through a CDN (e.g. cdnjs). For this tutorial, I’ll choose the last option.

Additionally, I’ve incorporated Babel for compiling the ES6 code down to ES5 and Lodash for taking advantage of its debounce function (we’ll use that later).

With that in mind, if you look under the Settings tab of our demo pen, you’ll see that I’ve included one external CSS file and three external JavaScript files.

CSS settings on CodePen
CSS settings on CodePen
JavaScript settings on CodePen
JavaScript settings on CodePen

1. The HTML

At this point it’s important to understand the structure of our page. Most importantly, we’ll define two carousels which have the exact same images and are synchronized (we’ll discuss how later). The image dimensions are 860 x 550 pixels, though in your own projects, these might be different. 

Lastly, as part of the second carousel we’ll specify the navigation arrows as well as an element which keeps track of the total number of slides.

Here’s the required structure for our demo page:

2. The CSS

In total, our gallery should have four different appearances, depending on the viewport available. Let’s visualize them by following a mobile-first approach.

When the browser window is less than 480px, it should look like this, with only the second carousel and navigation appearing:

The carousel layout on extra small screens
Carousel layout on extra small screens

Then, on screens between 480px and 768px, it should be as follows, with two thumbnails under the main slide:

The carousel layout on small screens
Carousel layout on small screens

Next, on screens between 769px and 1023px, we’ll introduce a third thumbnail:

Carousel layout on medium screens
Carousel layout on medium screens

Finally, on large screens (≥1024px), it should be as follows, with the thumbnails appearing to the side (note that they don’t quite fit on this image in their entirety):

The carousel layout on large screens
Carousel layout on large screens

All the cases above are catered for in the media queries shown below:

Notice there’s an !important rule. This overwrites an inline slick style.

3. The JavaScript

Let’s now turn our attention to the JavaScript-related things.

Caching Selectors

When the DOM is ready, as a good practice we cache some commonly-used selectors:

Initializing the Carousels

Then, we initialize and synchronize our two carousels. The code responsible for this behavior is as follows:

Without doubt, the best way to understand how this code works is to read the slick documentation. However, let me explain two important things here:

  • The asNavFor configuration option allows us to synchronize the carousels and use one as the navigation for the other.
  • By default, slick uses CSS transforms. In our case though, we disable them by setting useTransform: false. This is because they cause a small flickering in the first slide of the first carousel on large screens (we could have disabled them only for the first carousel).

Displaying and Customizing the Gallery Layout

Our gallery should be visible only when all page assets are ready. Initially, an optional preloader appears–refer to the markup again, it looks like this:

At this point, we have to think again about the desired gallery layout on large screens. If you look back at the corresponding screenshots, you’ll notice that both carousels have the same heights. In order to achieve that desired behavior, we have to write some custom JavaScript code (beyond our CSS). This code will dynamically set the height of the first carousel equal to the height of the second one (or vice versa).

Knowing the requirements above, here’s the code that runs when the entire page is ready:

And here’s the declaration of the handleCarouselsHeight function:

When the page loads, the gallery works fine. But it should also work as expected when the browser window gets resized. 

The code that deals with that particular situation is shown below:

Notice that the event handler is wrapped inside a debounce function. This a Lodash function that helps us restrict the amount of times this handler is called. 

Working With slick Events and Methods

Now that we've successfully implemented the main functionality of our gallery, let’s go a step further and build a few optional things.

First, at the top right corner of the second carousel we display the current slide and the total number of slides.

Displaying the current slide and the total number of slides
Displaying the current slide and the total number of slides

To accomplish this, we take advantage of the init and afterChange slick events.

Here’s the related code:

As a further improvement, each time we click on a slide of the first carousel, the associated slide of the second carousel should be active. Thanks to slick’s slickGoTo method, we’re able to develop this functionality.

Here’s the related code:

4. Browser Support

The demo should work well in all recent browsers and you can safely use it in your projects. 

I’ve only encountered one small bug in some browsers (Firefox, Edge) while testing the demo on large screens. As you click on the navigation arrows, all slides of the first carousel apart from the first one, fail to reach the top edge of their parent and leave a single pixel gap:

Slick leaves one pixel bug on some browsers
Slick’s one pixel bug on some browsers

Last but not least, small improvements and customizations might be needed as the window gets resized, depending on your needs.

 Conclusion

In this tutorial, we took advantage of slick.js and managed to build a beautiful responsive gallery. Hopefully now, you’re ready to try this implementation in your own projects. If that happens, feel free to share your project link in the comments below!

More JavaScript Projects to Spice Up Your Websites

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.