Awesome Slick Slider [ Updated Codepen Examples ]

Hello, guys in this article we will create an awesome Slick Slider With Motion Blur Effect using HTML CSS, and JavaScript.

Slick Slider Features:

Fully responsive.
Scales with its container.
Separate settings per breakpoint
Uses CSS3 when available.
Fully functional when not.
Swipe enabled. Or disabled, if you prefer.
Desktop mouse dragging
Infinite looping.
Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc…

How to create an awesome slick slider?

Step 1: — Creating a New Project

The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “as you want”.

Open up Visual Studio Code or any Text editor which is you liked, and create files(index.html, style.css main.js) inside the folder which you have created for slick slider. In the next step, we will start creating the basic structure of the webpage.

Step 2: — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Motion Blur Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
  </head>
  <body>

       <script src="main.js"></script>
  </body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<svg id="Layer">
      <defs>
        <filter id="blur0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="0 0">
        </filter>
        <filter id="blur1">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5 0">
        </filter>
        <filter id="blur2">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10 0">
        </filter>
        <filter id="blur3">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20 0">
        </filter>
        <filter id="blur4">
          <feGaussianBlur in="SourceGraphic" stdDeviation="30 1">
        </filter>
        <filter id="blur5">
          <feGaussianBlur in="SourceGraphic" stdDeviation="50 1">
        </filter>
      </defs>
    </svg>
    <div class="slider">
      <div class="slide"><img src="01.jpg"></div>
      <div class="slide"><img src="02.jpg"></div>
      <div class="slide"><img src="03.jpg"></div>
      <div class="slide"><img src="04.jpg"></div>
      <div class="slide"><img src="05.jpg"></div>
      <div class="slide"><img src="06.jpg"></div>
    </div>

Step 3: — Adding Styles for the Classes

In this step, we will add CSS code for style our html elements.

* {
  padding: 0;
  margin: 0;
  outline: 0;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}
button {
    position: fixed;
    top: 50%;
    z-index: 10;
    width: 70px;
    height: 70px;
    background-color: #000 !important;
    overflow: hidden;
    transform: translateY(-50%);
    outline: 0;
    border: 1px solid #fff;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    text-indent: -99999px;
}
button.slick-prev {
    left: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLWxlZnQ8L3RpdGxlPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGQ9Ik0xMC40MTMgMTJsNS4yOTQtNS4yOTRjMC4zODctMC4zODcgMC4zODctMS4wMjUgMC0xLjQxM3MtMS4wMjUtMC4zODctMS40MTMgMGwtNiA2Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzbDYgNmMwLjE5NCAwLjE5NCAwLjQ1IDAuMjk0IDAuNzA2IDAuMjk0czAuNTEzLTAuMSAwLjcwNi0wLjI5NGMwLjM4Ny0wLjM4NyAwLjM4Ny0xLjAyNSAwLTEuNDEzbC01LjI5NC01LjI5NHoiPjwvcGF0aD48L3N2Zz4=);
}
button.slick-next {
    right: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jaGV2cm9uLXJpZ2h0PC90aXRsZT48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTUuNzA2IDExLjI5NGwtNi02Yy0wLjM4Ny0wLjM4Ny0xLjAyNS0wLjM4Ny0xLjQxMyAwcy0wLjM4NyAxLjAyNSAwIDEuNDEzbDUuMjk0IDUuMjk0LTUuMjk0IDUuMjk0Yy0wLjM4NyAwLjM4Ny0wLjM4NyAxLjAyNSAwIDEuNDEzIDAuMTk0IDAuMTk0IDAuNDUgMC4yOTQgMC43MDYgMC4yOTRzMC41MTMtMC4xIDAuNzA2LTAuMjk0bDYtNmMwLjM5NC0wLjM4NyAwLjM5NC0xLjAyNSAwLTEuNDEzeiI+PC9wYXRoPjwvc3ZnPg==);
}
.slick-list {
    overflow: visible;
    will-change: transform;
}
.slick-list {
    overflow: visible;
    will-change: transform;
}
.slick-slide {
    padding: 0 100px;
    width: 100vw;
    filter: drop-shadow(0px 10px 40px rgba(0,0,0,0.50) );
}
.slick-slide img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@keyframes motion-blur {
    0% {
        filter: url(#blur0);
        transform: scale(1, 1);
    }
    15% {
        filter: url(#blur1);
        transform: scale(1, 0.98);
    }
    30% {
        filter: url(#blur2);
        transform: scale(1, 0.93);
    }
    45% {
        filter: url(#blur3);
        transform: scale(1.1, 0.90);
    }
    60% {
        filter: url(#blur4);
        transform: scale(1.2, 0.88);
    }
    75%,100% {
        filter: url(#blur5);
        transform: scale(1.35, 0.85);
    }

}
.do-tans {
    animation: motion-blur 0.1s linear forwards,
            motion-blur 0.5s linear reverse forwards 0.1s; 
}

Step 4 — Adding JavaScript code

In this step, we will add some JavaScript code in main.js file

$(".slider").slick({
  attrow: true,
  dots: false,
  speed: 500,
  infinite: true,
  centerMode: true,
  variableWidth: true,
  draggable: false,
  slidesToShow:1
});
$(".slider")
.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
  $(".slick-list").addClass("do-tans");
})
.on("afterChange", function() {
  $(".slick-list").removeClass("do-tans");
})

#Final Result

Responsive slider with blur effect using swiper js

Hello guys in this tutorial we will create an responsive slider with blur effect using swiper js

Learn more

Best Collection of Slick Slider Codepen Examples

#1: Slick carousel slider

Slick carousel slider, which was developed by Ellie Sadler. Moreover, you can customize it according to your wish and need.

Author:	Ellie Sadler
Created on:	OCTOBER 12, 2015
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Slick carousel slider

#2: Simple animated slider with Slick.js

Simple animated slider with Slick.js, which was developed by Alexandre Buffet. Moreover, you can customize it according to your wish and need.

Author:	Alexandre Buffet
Created on:	JANUARY 31, 2017
Made with:	HTML, CSS(Less) & JS
Demo Link:	Source Code / Demo
Tags:	Simple animated Slick slider

#3: Slick Slider with Progress Bar

Slick Slider with Progress Bar, which was developed by Stephen Flannery. Moreover, you can customize it according to your wish and need.

Author:	Stephen Flannery
Created on:	MAY 26, 2016
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Slick Slider with Progress Bar

#4: Slick Slider Fade Zoom Animation

Slick Slider Fade Zoom Animation, which was developed by Fabio Ottaviani. Moreover, you can customize it according to your wish and need.

Author:	Fabio Ottaviani
Created on:	JULY 29, 2016
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Slick Slider Fade Zoom Animation

#5: Responsive testimonial Slick slider

Responsive testimonial Slick slider, which was developed by hellokatili. Moreover, you can customize it according to your wish and need.

Author:	hellokatili
Created on:	JULY 9, 2015
Made with:	HTML(Haml), CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Responsive testimonial Slick slider

#6: Vertical Slick Slider

Vertical Slick Slider, which was developed by Cory Schadt. Moreover, you can customize it according to your wish and need.

Author:	Cory Schadt
Created on:	JUNE 17, 2017
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Vertical Slick Slider

#7: Animated Slick Slider

Animated Slick Slider, which was developed by AaronMcGuire. Moreover, you can customize it according to your wish and need.

Author:	AaronMcGuire
Created on:	SEPTEMBER 19, 2019
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Animated Slick Slider

#8: Slick slider animation with animate.css

Slick slider animation with animate.css, which was developed by Ankit Hingarajiya. Moreover, you can customize it according to your wish and need.

Author:	Ankit Hingarajiya
Created on:	SEPTEMBER 18, 2019
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	Slick slider animation

#9: Slick Slider With Slice Animation

Slick Slider With Slice Animation, which was developed by Fabio Ottaviani. Moreover, you can customize it according to your wish and need.

Author:	Fabio Ottaviani
Created on:	JULY 19, 2016
Made with:	HTML, CSS(SCSS) & JS
Demo Link:	Source Code / Demo
Tags:	Slick Slider With Slice Animation

#10: HTML5 Slick Slider

HTML5 Slick Slider, which was developed by Wilson. Moreover, you can customize it according to your wish and need.

Author:	Wilson
Created on:	MARCH 15, 2020
Made with:	HTML, CSS & JS
Demo Link:	Source Code / Demo
Tags:	HTML5 Slick Slider

If you liked this article Awesome Slick Slider examples, you should check out this one CSS Horizontal Accordion Slider examples