Slick Photo Gallery

About

This code snippet is meant to serve as an alternative option to the Bootstrap carousel that is generally used as the go-to method of creating photo galleries for custom page designs. In most cases, the Bootstrap carousel is a great option for a photo gallery as it is lightweight and simple to customize. In some instances, however, where there is a greater than usual number of images being supplied or the size/ratios of each image differ vastly, the benefits of the Bootstrap carousel layout can be lost and look messy.

This photo gallery setup makes use of Slick, which is most commonly seen on our Homepage Model Bars. As such, it requires external CSS stylesheets and JavaScript files.

Advantages

Greater customization with Slick settings - number of slides to display, sliding speed, break points, etc.
Responsive - displays full width no matter the image sizes.
Touch-friendly dragging on mobile.

Disadvantages

More to load, easier to break - as opposed to the Bootstrap carousel snippet, which uses the already loaded Bootstrap CSS/JS, the external code and additional JS allow for more opportunity for something to be left out or placed incorrectly.
If images are too different in ratio or too small, the cropping and stretching done to achieve the full-width look could result in overly poor image display quality.

Slick Settings and Options

Read here for everything you can do to customize Slick, but some of the more relevant settings are listed below:

slidesToShow - How many slides/images to display at a time
autoplay - Set true or false to enable Autoplay
responsive - Change display settings based on screen size. The breakpoint sets the screen size width at which the specific settings occur, and at each break point you can set different slidesToShow, centerPadding, etc.

Optional CSS

These are included in the code snippet by default but are solely for aesthetic purposes and can be removed if not needed.

Opacity for non-active slides - The image previews to the left and the right of the currently displaying image will be displayed at about 50% opacity underneath the navigation arrows.
Force height and crop for different aspect ratios - Display all images at the same aspect ratio to prevent page content bouncing up and down between slides. The default value of 48vw is meant to give a roughly 2:1 ratio on full-width layouts, but this can be changed to whatever. Uses cropping, so most likely some content will be cut off depending on the image. This feature is not needed if all the source images are already the same height/width dimensions.

Display

The demo gallery below is set to display at full screen width, but the code is designed to be responsive and to function just as well in containers or other screen sizes.

Examples of the above photos to illustrate the different ratios and the resizing/cropping occuring:

Code Snippet

Click below to copy the code snippet to your clipboard.

Copied!

<link rel="stylesheet" type="text/css" href="/assets/shared/CustomHTMLFiles/Compliance/slick/slick.min.css">
<link rel="stylesheet" type="text/css" href="/assets/shared/CustomHTMLFiles/Compliance/slick/slick-gallery.min.css">
<style>
/* Opacity for non-active slides */
.galleryS .slick-slide { opacity: 0.6; }
.galleryS .slick-slide.slick-active { opacity: 1; }
/* Force height and crop for different aspect ratios */
.galleryS .slick-slide { object-fit: cover; height: 48vw; max-height: 75vh; }
@media (max-width: 539px) {
.galleryS .slick-slide { height: 56vw; }
}
</style>
<div id="gallery" class="container-fluid">
<div class="pad-vert-2x">
<div class="galleryS text-center">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
<img src="..." alt="">
</div>
</div>
</div>
<script src="/assets/shared/CustomHTMLFiles/Compliance/slick/slick.min.js" defer=""></script>
<script>
window.addEventListener('load', function()
{
$(document).ready(function()
{
$('.galleryS').show();
$('.galleryS').slick(
{
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
centerPadding: '120px',
autoplay: false,
autoplaySpeed: 3000,
swipeToSlide: true,
arrows: true,
responsive: [
{
breakpoint: 1200,
settings:
{
centerPadding: '90px'
}
},
{
breakpoint: 540,
settings:
{
centerPadding: '0px'
}
}]
});
});
});
</script>

The
Lab