滑动滑块在第一张幻灯片上失去滑动滑块活动类

时间:2018-08-06 08:04:17

标签: javascript jquery html css swiper

我有一个使用“循环”属性的滑动滑块。问题是,如果我的雨刷器完成了整圈,最后一张幻灯片(第三张幻灯片)进入了第一张幻灯片,但没有获得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

非常感谢您。

0 个答案:

没有答案