Форум

Sergey-web92 · #1 (**permalink**) 05.02.2021, 17:47

Здравствуйте. Помогите пожалуйста разобраться.
Не получается настроить анимацию текста на слайдере
Слайдер 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>

рони · #2 (**permalink**) 05.02.2021, 19:33

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 · #3 (**permalink**) 06.02.2021, 09:47

Сообщение от рони

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>

Большое спасибо, Вы мне очень помогли

рони · #4 (**permalink**) 06.02.2021, 09:58

Sergey-web92,
не копируйте примеры целиком без надобности, можно цитировать.

Форум

Справочник

Discord чат

Курсы javascript