"Slick slider with Smooth Animation"
Bootstrap 4.1.1 Snippet by ranjit1602

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <title>How to using slick</title> <!-- Slick css --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/> <style> body{ display: inline-flex; background: darkslategrey;} .basic, .withOptions{margin: 0 50px;} .basic div, .withOptions div {width: 500px;height: 250px;} img {width: 100%;} .wrapper{ padding: 70px 0; } /* Default slide */ .center-slider .slick-slide{ background-color: #b32532; color: #FFF; height: 200px; margin: 0 15px 0 0; display: flex; align-items: center; justify-content: center; transform: scale(0.8); transition: all 0.4s ease-in-out; } .center-slider .slick-slide, .center-slider .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] { transform: scale(0.8, 0.8); transition: all 0.4s ease-in-out; } /* Active center slide (You can change anything here for cenetr slide)*/ .center-slider .slick-center, .center-slider .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] { transform: scale(1.1); background-color: #000000; } .center-slider .slick-current.slick-active{ transform: scale(1.1); background-color: #000000; } .slick-next, .slick-prev{ z-index: 5; } .slick-next{ right: 15px; } .slick-prev{ left: 15px; } .slick-next:before, .slick-prev:before{ color: #000; font-size: 26px; } </style> </head> <body> <div class="wrapper"> <div class="center-slider"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> <div>Slide 6</div> </div> </div> <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Slick --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <script> $(document).ready(function(){ $('.center-slider').slick({ slidesToShow: 5, slidesToScroll: 1, centerMode: true, arrows: true, dots: false, speed: 300, centerPadding: '20px', infinite: true, autoplaySpeed: 5000, autoplay: true }); }); </script> </body>

Related: See More

Material Bootstrap Wizard
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: