Swiper滑块自定义上一个/下一个导航答案

【问题标题】：Swiper slider custom prev/next navigationSwiper滑块自定义上一个/下一个导航
【发布时间】：2019-03-21 09:35:07
【问题描述】：

我正在构建带有滑动滑块 (https://idangero.us/swiper/) 列出投资组合项目的 wordpress 网站。我需要的是包含下一张幻灯片标题的下一个按钮。那可能吗？像这样的东西： rough preesentation

这是代码：

var swiperOptions = {
    loop: true,
    speed: 1000,
}

function portfolioSlider() {
    var portfolioSlider = new Swiper('.js-portfolio-slider', swiperOptions);
    $(document).on('click', '.js-portfolio-slider__next', function(e) {
        e.preventDefault();
        portfolioSlider.slideNext();
    });
}

portfolioSlider();

【问题讨论】：

标签： javascript wordpress swiper

【解决方案1】：

在此处查看文档：https://idangero.us/swiper/api/#events

portfolioSlider.on('transitionEnd', function() {
   var nextTitle = $('.swiper-slide-next').find('.title');
   if (nextTitle.length > 0) {
      $('.js-portfolio-slider__next').text(nextTitle);
   }
})

应该做的伎俩。 'swiper-slide-next' 应该是标记中下一张幻灯片的类

【讨论】：

【解决方案2】：

使用swiper.slides[index + 1].innerText获取内部内容

请参考

penvar swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

console.log(swiper.slides[1].innerText) visit https://codepen.io/harmeet2harry/pen/qvQWyO

【讨论】：