Sergey-web92,
медитируйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style type="text/css">
.slider{
width: 300px;
margin: auto;
position: relative;
}
.slick-dots {
display:flex;
justify-content: center;
align-items: center;
}
.slick-dots li button {
font-size: 20px;
margin-left: 40px;
cursor: pointer;
}
ul{
width: 100%;
height: 10px;
line-height:9px;
}
li{
float: left;
margin-left: 20px;
list-style: none;
}
h2.animate__animated,h3.animate__animated, button.text-container__btn {
visibility: hidden;
}
h2.animate__animated.animate__fadeInRight, h3.animate__animated.animate__fadeInRight,button.text-container__btn.animate__fadeInRight{
visibility: visible;
}
.text-container__title.animate__fadeInRight{
animation-delay: 300ms;
}
.text-container__subtitle.animate__fadeInRight{
animation-delay: 700ms;
}
.text-container__btn.animate__fadeInRight{
animation-delay: 1000ms;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider-area__slider-img').slick({
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
fadeSpeed: 1000
})
$(".slider-area__slider-img").on("beforeChange", function(event, slick, currentSlide){
slick.$slides.find("h2, h3, .text-container__btn").removeClass("animate__fadeInRight")
});
$(".slider-area__slider-img").on("afterChange", function(event, slick, currentSlide){
slick.$slides.eq(currentSlide).find("h2, h3, .text-container__btn").addClass("animate__fadeInRight")
});
});
</script>
</head>
<body>
<div class="slider-area__slider-img">
<div class="slider-area__slide-wrapper slide-wrapper">1<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
//====================
<div class="slider-area__slide-wrapper slide-wrapper">2<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
//================================
<div class="slider-area__slide-wrapper slide-wrapper">3<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
</div>
</body>
</html>
|