Slick. js карусельный слайдер - разные анимации по клику prev / next - PullRequest
Новая
       26

Slick. js карусельный слайдер - разные анимации по клику prev / next

0 голосов
/ 02 февраля 2020

Полу ньюб ie здесь. Надеюсь, кто-нибудь может мне помочь.

У меня есть слайдер изображений с помощью Slick. js.

У меня есть h2-тег и p-тег, анимирующийся справа при нажатии на кнопку prev / следующая кнопка. Это выглядит хорошо при нажатии следующей кнопки, но выглядит глупо при нажатии кнопки prev, и изображение появляется слева, а текст анимируется справа. Эффект, которого я хочу достичь: https://uv-way.com/cars/

Как сделать разные анимации при нажатии двух разных кнопок?

HTML: 

<section class="center slider" id="slider">
    <div>
        <h2>Aequatore Coffee</h2>
        <p class="slider-p">Brødtekst indsættes her...</p>
        <img src="../images/Logoer_1500x1000px_2.jpg">
    </div>
    <div>
        <h2>Tree Surgeon</h2>
        <p class="slider-p">Brødtekst indsættes her...</p>
        <img src="../images/Logoer_1500x1000px_5.jpg">
    </div>
    <div>
        <h2>Design Match</h2>
        <p class="slider-p">Brødtekst indsættes her...</p>
        <img src="../images/Logoer_1500x1000px_3.jpg">
    </div>
</section>

<div class="arrows">
    <li class="prev"></li>
    <li class="next"></li>
</div>

<script type="text/javascript" src="../slick-1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
  $(".vertical-center-4").slick({
    dots: true,
    vertical: true,
    centerMode: true,
  });
  $(".center").slick({
    dots: false,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 1000,
    centerPadding: '225px',
    easing: 'easeOutCubic',
    prevArrow: $('.prev'),
    nextArrow: $('.next')
  });
});
</script>

CSS: 

    .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .3;
}

.slick-slide h2 {
   transform: translateX(50px);
}

.slick-slide p {
    transform: translateX(50px);
}

.slick-active {
    opacity: .5;
}

.slick-active h2 {
    opacity: 0;
}

.slick-active p {
    opacity: 0;      
}

.slick-current {
    opacity: 1;
}

.slick-current h2 {
    opacity: 1;
    transform: translateX(-50px);
}

.slick-current p {
    opacity: 1;
    transform: translateX(-50px);
}

Slick: https://kenwheeler.github.io/slick/

...