滑动滑块 — 活动索引

Question

我正在尝试对滑块(使用Swipeper制作(的幻灯片编号进行动画处理，但它无法正常工作，而且我很难找到我缺少的内容。底部的幻灯片编号应该会改变，但是当我单击它时，没有任何反应。

这是代码的 JSfiddle

这是 html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<!-- Section Testimonies -->
<div class="section testimonial" id="testimonial">
<div class="swiper-container faded-text">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="p-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
<p><strong>Johnny Doe</strong></p>
<p>Lorem ipsum dolor, Company name</p>
</div>
<div class="swiper-slide">
<p class="p-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
<p><strong>Johnny Doe</strong></p>
<p>Lorem ipsum dolor, Company name</p>
</div>
<div class="swiper-slide">
<p class="p-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
<p><strong>Johnny Doe</strong></p>
<p>Lorem ipsum dolor, Company name</p>
</div>
<div class="swiper-slide">
<p class="p-large">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
</p>
<p><strong>Johnny Doe</strong></p>
<p>Lorem ipsum dolor, Company name</p>
</div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<div class="swiper-navigation">
<div class="swiper-button-prev"></div>
<!-- <div class="swiper-counter"><span class="swiper-numbers__current">01</span> / 05</div> -->
<div class="swiper-counter"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<!-- / Section Testimonies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

CSS

#testimonial {
.swiper-container {
width: 100%;
height: 100%;
.swiper-wrapper {
.swiper-slide {
text-align: left;
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
max-width: 800px;
.p-large {
margin-bottom: 120px;
}
}
.swiper-slide-next {
opacity: 0.3;
}
}
.swiper-navigation {
margin-top: 200px;
position: relative;
max-width: 20vw;
display: flex;
justify-content: flex-start;
align-items: center;
.swiper-counter,
.swiper-counter span {
position: relative;
z-index: 99999;
}
.swiper-counter .next,
.swiper-counter .count {
position: relative;
}
.swiper-counter .next {
transform: translateY(-12px);
right: 10px;
}
.swiper-button-prev {
position: relative;
top: 0;
margin-top: 0;
left: 0;
background-size: 20px 20px;
}
.swiper-counter {
margin: 0 60px;
}
.swiper-button-next {
position: relative;
top: 0;
margin-top: 0;
right: 0;
background-size: 20px 20px;
}
}
}
}

最后是JavaScript

const counter = $('.swiper-counter');
let currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);
function photosChange(swiper) {
const index = swiper.activeIndex + 1;
const $current = $('.photo-slide').eq(index);
const dur = 0.8;
const prevCount = $('.count');
currentCount = $(`<span class="count next">${index}<span/>`);
currentCount.appendTo(counter);
TweenMax.to(prevCount, dur, {
y: -12,
opacity: 0,
onCompleteParams: [prevCount],
onComplete(prevCount) {
prevCount.remove();
},
ease: Power4.easeOut,
});
TweenMax.fromTo(
currentCount,
dur,
{
y: 12,
opacity: 0,
},
{
y: 0,
opacity: 1,
ease: Power4.easeOut,
},
);
}
const swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 200,
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
onSlideChangeStart: photosChange,
});

Answer 1

看起来onSlideChangeStart: photosChange方法不起作用。

你可以把它添加到代码的末尾(它应该在扫卡初始化之后(：

swiper.on('slideChange', function () {
$('.count').text(this.activeIndex + 1);
});

您也可以将photosChange(swiper)的功能传递给此函数。
希望对您有所帮助。

Answer 2

如果你想得到一个真正的索引，那么请使用这个代码。

swiper.on('transitionEnd', function () {
$('.count').text(swiper.realIndex + 1);
});