0

我正在使用Swiper滑块，并为它创建了一个固定位置的标题。我不希望他们像往常一样随着幻灯片移动，所以我从幻灯片中取出了标题。我让它工作了，但我在用GSAP动画标题时遇到了麻烦。我知道 GSAP 是如何工作的，但我不知道如何在这种特殊情况下为标题设置动画。

例如：如果幻灯片发生变化，则上一张幻灯片标题淡出 + 上滑，下一张幻灯片标题淡入 + 上滑。我希望你明白我的意思。

也许这里有人可以帮助我：https ://jsfiddle.net/x0sukfd6/

谢谢你。

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    speed: 1200,
    grabCursor: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    on: {
      slideChangeTransitionStart: function () {
          // Slide captions
          var swiper = this;
          var slideTitle = $(swiper.slides[swiper.activeIndex]).attr("data-title");
          var slideSubtitle = $(swiper.slides[swiper.activeIndex]).attr("data-subtitle");
          $(".slide-captions").html(function() {
            return "<h2 class='current-title'>" + slideTitle + "</h2>" + "<h4 class='current-subtitle'>" + slideSubtitle + "</h4>";
          });
      }
    }
});

// Slide captions on load
var sizes1 = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-title");
    var sizes2 = $(mySwiper.slides[mySwiper.activeIndex]).attr("data-subtitle");
    $(".slide-captions").html(function() {
    return "<h2 class='current-title'>" + sizes1 + "</h2>" + "<h4 class='current-subtitle'>" + sizes2 + "</h4>";
});
4

0 回答 0