Как сделать анимацию текста на слайдере slick?
Здравствуйте. Помогите пожалуйста разобраться.
Не получается настроить анимацию текста на слайдере Слайдер slick, подключил animate.css Хочу, чтобы при смене слайда текст на нем тоже анимировался Вот код:
// слик-слайдер
$(document).ready(function () {
$('.slider-area__slider-img').slick({
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 2500,
fade: true,
fadeSpeed: 1000,
})
});
// анимация текста
$('.slider-area__slider-img').on('changed.owl.carousel', function(event) {
$('.text-container__up-title').addClass('animate__fadeInRight');
setTimeout(function () { $('.text-container__up-title').addClass('animate__fadeInRight'); }, 0);
// ==
$('.text-container__title').addClass('animate__fadeInRight');
setTimeout(function () { $('.text-container__title').addClass('animate__fadeInRight'); }, 0);
// ==
$('.text-container__subtitle').addClass('animate__fadeInRight');
setTimeout(function () { $('.text-container__subtitle').addClass('animate__fadeInRight'); }, 0);
// ==
$('.text-container__btn').addClass('animate__fadeInRight');
setTimeout(function() { $('.text-container__btn').addClass('animate__fadeInRight'); }, 0);
})
<div class="slider-area__slider-img">
<div class="slider-area__slide-wrapper slide-wrapper"><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__delay-1s">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__delay-1s">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__delay-1s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__delay-1s">SHOP NOW!</button>
</div>
</div>
//====================
<div class="slider-area__slide-wrapper slide-wrapper"><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__delay-1s">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__delay-1s">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__delay-1s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__delay-1s">SHOP NOW!</button>
</div>
</div>
//================================
<div class="slider-area__slide-wrapper slide-wrapper"><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__delay-1s">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__delay-1s">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__delay-1s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__delay-1s">SHOP NOW!</button>
</div>
</div>
</div>
|
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>
|
Цитата:
|
Sergey-web92,
не копируйте примеры целиком без надобности, можно цитировать. |
| Часовой пояс GMT +3, время: 18:48. |