Bootstrap Snippet Centermode Slick slider with Smooth Animation using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 ---------->
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<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>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>   
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
  background-color: #F5F5FF;
}
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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
      });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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