Slick Slider With Motion Blur Effect

#html #css #javascript #beginners

Hello, guys in this tutorial we will create a slider with a motion blur effect using the slick slider.

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…

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

<!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.

* {
  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; 
}