JavaScript

Using slick.js to Create an Image Slideshow with Gradual Zoom Effect [jQuery]

 

An image slideshow is a powerful tool to make your website more attractive. In this article, we will show you how to use the popular “slick.js” library to create not just simple image transitions, but an effect where the image gradually zooms in as it changes.

Previously, we introduced “Multiple Image Slider Plugin with slick.js“, but this time we’ll take it a step further. In addition to the basic use of slick.js, we’ll explain how to implement a zoom-in effect using CSS animation.

Contents
  1. Purpose of This Guide
  2. Overview: Implementing Zoom Animation with slick.js
  3. Step 1: Preparing the HTML
  4. Step 2: Adding Zoom Animation with CSS
  5. Step 3: Set Up slick.js with JavaScript
  6. Demo Page: slick.js Zoom Animation Slideshow
  7. Conclusion

Purpose of This Guide

  • Explain the basic usage of slick.js in a way that beginners can understand
  • Provide concrete examples of zoom effects using CSS animation
  • Step-by-step coding examples using HTML, CSS, and JavaScript

After reading this, you’ll be able to easily add animated image slideshows to your website!

Overview: Implementing Zoom Animation with slick.js

Let’s briefly explain how it works. By combining the following three elements, you can create a zoom-in transition effect for your images.

  1. HTML: Arrange images in a slideshow format
  2. CSS: Set up animation effects
  3. JavaScript: Control the slideshow using slick.js

We’ll go through each of these step by step, so let’s get started together!

Step 1: Preparing the HTML

First, we’ll write the HTML for the slideshow.
The following code shows how to create a slideshow area (class=”slider”) with images (1.jpg to 3.jpg) that zoom in while transitioning using slick.js. 

<h1>Using slick.js to Create an Image Slideshow with Gradual Zoom Effect</h1>

<div class="slider">
  <div class="slick-img">
    <img src="1.jpg">
  </div>
  <div class="slick-img">
    <img src="2.jpg">
  </div>
  <div class="slick-img">
    <img src="3.jpg">
  </div>
</div>

Step 2: Adding Zoom Animation with CSS

Next, we define a zoom animation in CSS.
Use the code below as a reference to create a smooth zoom-in effect with @keyframes.

Make sure to load the slick.css file.
Specify the width and height for the `.slider` area and set `overflow: hidden` so that content doesn’t spill outside the slide area.
Use @keyframes and the `.animation` class to apply a gradual zoom effect. 

<style>
body {
  margin: 20px 10px;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.slider {
  width: 800px;
  height: 533px;
  overflow: hidden;
  margin: 0 auto;
}
.slick-img img {
  width: 100%;
}
@keyframes fdzm {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.animation {
  animation: fdzm 4s 0s forwards;
}
</style>

Step 3: Set Up slick.js with JavaScript

Lastly, we’ll use JavaScript to control the slideshow with slick.js.
The code below ensures that the zoom animation is applied each time the slide changes.

Load jquery-2.1.4.min.js and slick.js.
This script adds the .animation class to the first slide before the slideshow starts and sets options such as fade effect, speed, autoplay, etc. 

<script src="jquery-2.1.4.min.js"></script>
<script src="slick.js"></script>
<script>
$(function () {
    $('.slider').on('init', function(event, slick) {
      $('.slick-slide[data-slick-index="0"]').addClass("animation");
    })
    .slick({
    fade: true,
    dots: false,
    infinite: true,
    speed: 1000,
    slidesToShow: 1,
    adaptiveHeight: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
    pauseOnFocus: false,
    pauseOnHover: false
    })
    .on({
      beforeChange: function (event, slick, currentSlide, nextSlide) {
        $(".slick-slide", this).eq(nextSlide).addClass("animation");
        $(".slick-slide", this).eq(currentSlide).addClass("rm-animation");
      },
      afterChange: function () {
        $(".rm-animation", this).removeClass("rm-animation animation");
      },
    });
});
</script>

Demo Page: slick.js Zoom Animation Slideshow

A live demo is available for you to test this in action. Click the link below to experience the slick.js zoom animation effect.



Demo Page: slick.js Zoom Animation Slideshow

Conclusion

In this guide, we explained how to create a zoom transition effect using slick.js.

By combining HTML, CSS, and JavaScript, you can easily build an engaging slideshow for your website. Try incorporating it into your next project!

Note: Use at your own discretion if reusing the content.
Do not copy the Google Analytics tag inside the head tag of the demo page.

slick.js Zoom Effect
RELATED POST