DEV Community

loading...
Cover image for Slick Slider With Motion Blur Effect

Slick Slider With Motion Blur Effect

stackfindover profile image Stackfindover Updated on ・3 min read

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

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

<!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>
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

Slick Slider Video Output:

Subscribe for more

Slick Slider CodePen Output:

Discussion (2)

pic
Editor guide
Collapse
rahul7733 profile image
Rahul7733

Awesome