Slick Slider With Motion Blur Effect
Tags: html, css, javascript, beginners
Published: 2021-01-28 15:28:15

<strong><em>Hello, guys in this tutorial we will create a <a href="https://blog.stackfindover.com/responsive-slider-with-blur-effect-using-swiper-js/" target="_blank" rel="dofollow">slider </a>with a motion blur <a href="https://blog.stackfindover.com/?s=effect" target="_blank" rel="noreferrer noopener">effect</a> using the <a href="https://kenwheeler.github.io/slick/" target="_blank" rel="noreferrer noopener">slick slider</a>.</em></strong>

###Slick Slider Features:###
1. Fully responsive. 
2. Scales with its container.
3. Separate settings per breakpoint
4. Uses CSS3 when available. 
5. Fully functional when not.
6. Swipe enabled. Or disabled, if you prefer.
7. Desktop mouse dragging
8. Infinite looping.
9. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc…

First, we need to create two files **index.html** and **style.css** then we need to do code for it.
###Slick Slider Step:1###
**Add below code inside index.html**
```html
<!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 http-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>
    <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>

    <script type="text/javascript">
      $(".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");
      })
    </script>
  </body>
</html>
```
###Slick Slider Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.
```css
* {
  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; 
}
```
###Slick Slider Video Output:###
<a href="https://www.youtube.com/stackfindover?sub_confirmation=1"> Subscribe for more</a>

{% youtube zxeWYiafNfs %}

###Slick Slider CodePen Output:###
{% codepen https://codepen.io/stack-findover/pen/eYBmZjM default-tab=css,result %}