<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" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<style>
.slider img {
width: 100%;
height: auto;
}
</style>
<ul class="slide">
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=1" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=2" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=3" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=4" />
</li>
<li class="item">
<img src="http://placehold.jp/1920x1080.png?text=5" />
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
body {
margin: 0;
padding: 0;
}
/* slide */
.slide {
position: relative;
margin: 0;
padding: 0;
}
.slide .item {
position: relative;
height: 100%;
}
.slide .item::before {
display: block;
padding-top: 39%;
content: "";
}
.slide .item .image {
position: relative;
overflow: hidden;
}
.slide .item img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
position: relative;
height: 100%;
}
.slide-animation{
animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
var $slide = $(".slide")
.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
speed: 2000,
autoplaySpeed: 4000,
autoplay: true
})
.on({
beforeChange: function(event, slick, currentSlide, nextSlide) {
$(".slick-slide", this).eq(currentSlide).addClass("preve-slide");
$(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
},
afterChange: function() {
$(".preve-slide", this).removeClass("preve-slide slide-animation");
}
});
$slide.find(".slick-slide").eq(0).addClass("slide-animation");
