我有一个使用“循环”属性的滑动滑块。问题是,如果我的雨刷器完成了整圈,最后一张幻灯片(第三张幻灯片)进入了第一张幻灯片,但没有获得swiper-slider-active
类,因此我还会遇到CSS的其他麻烦。
注意:如果我留在第二张幻灯片中,而转到上一张幻灯片,则不会发生。
你能帮我吗?
这是我的轻拍:
swiperSlide.end()
.find("[data-caption-animate]")
.addClass("not-animated")
.end()
.swiper({
autoplay: s.attr('data-autoplay') !== "false" && !isNoviBuilder ? s.attr('data-autoplay') : null,
direction: s.attr('data-direction') ? s.attr('data-direction') : "horizontal",
effect: s.attr('data-slide-effect') ? s.attr('data-slide-effect') : "slide",
speed: s.attr('data-slide-speed') ? s.attr('data-slide-speed') : 600,
keyboardControl: s.attr('data-keyboard') === "true",
mousewheelControl: s.attr('data-mousewheel') === "true",
mousewheelReleaseOnEdges: s.attr('data-mousewheel-release') === "true",
nextButton: next.length ? next.get(0) : null,
prevButton: prev.length ? prev.get(0) : null,
pagination: pag.length ? pag.get(0) : null,
paginationClickable: pag.length ? pag.attr("data-clickable") !== "false" : false,
paginationBulletRender: pag.length ? pag.attr("data-index-bullet") === "true" ? function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
} : null : null,
scrollbar: bar.length ? bar.get(0) : null,
scrollbarDraggable: bar.length ? bar.attr("data-draggable") !== "false" : true,
scrollbarHide: bar.length ? bar.attr("data-draggable") === "false" : false,
loop: s.attr("data-loop") && !isNoviBuilder ? s.attr('data-loop') !== "false" : false,
simulateTouch: s.attr('data-simulate-touch') && !isNoviBuilder ? s.attr('data-simulate-touch') === "true" : false,
autoplayDisableOnInteraction: true,
onTransitionStart: function (swiper) {
toggleSwiperInnerVideos(swiper);
},
onTransitionEnd: function (swiper) {
toggleSwiperCaptionAnimation(swiper);
},
onInit: function (swiper) {
toggleSwiperInnerVideos(swiper);
toggleSwiperCaptionAnimation(swiper);
var swiperParalax = s.find(".swiper-parallax");
for (var k = 0; k < swiperParalax.length; k++) {
var $this = $(swiperParalax[k]),
speed;
if (parallax && !isIEBrows && !isMobile) {
if (speed = $this.attr("data-speed")) {
makeParallax($this, speed, s, false);
}
}
}
$(window).on('resize', function () {
swiper.update(true);
})
}
(抱歉,我无法嵌入图像)
在加载时: This
第二张幻灯片处于活动状态: This
第三张幻灯片处于活动状态: This
在第三张幻灯片之后的第一张上(第三张幻灯片是最后一张,因此我将转到下一项): This
在第二张幻灯片上的第一个之后(现在,我要转到上一个项目): This
非常感谢您。