代码之家  ›  专栏  ›  技术社区  ›  Developer

带5张图片的光滑旋转木马-闪烁问题

  •  1
  • Developer  · 技术社区  · 6 年前
    • CodePen Demo 点击红色圆圈(下一步按钮)你会看到从右边闪烁的问题下一个图像是附加的,尝试了所有可能的方法都无法修复,有人可以查看它。

    • 同样的事情发生在点击后退按钮的右边同样的问题

    $(function() {
      var docWidth, docHeight, winWidth, winHeight;
      var screenXs = 325;
      var screenSm = 600;
      var screenMd = 1040;
      var screenLg = 1280;
      var screenXLg = 1800;
    
      function createFilmStrip() {
        /* $(".filmstrip-carousel").each(function () {
            if ($(this).find(".slider").hasClass("slick-slider")) {
                $(this).find(".slider").find(".slick-slide").removeClass("slick-left slick-right slick-normal slick-middle slick-active slick-cloned");
                $(this).find(".slider").slick("unslick");
            } */
    
        /* $(this).find(".slider").slick({
            dots: false,
            infinite: false,
            slidesToShow: 5,
            centerMode: true,
            variableWidth: true,
            autoplay: false,
            centerPadding: '12%',
            adaptiveHeight: false,
            arrows: true,
            speed: 330
        }); */
        /* }); */
      }
      createFilmStrip();
      $(".slider").slick({
        dots: false,
        infinite: false,
        slidesToShow: 3,
        centerMode: true,
        variableWidth: true,
        autoplay: false,
        centerPadding: '10px',
        adaptiveHeight: false,
        arrows: true,
        speed: 330
      });
    
      function updateSlideScales(slick, currentSlide, nextSlide) {
        $.each(slick.$slideTrack[0].children, function(key, value) {
          $(this).removeClass("slick-left slick-right slick-middle slick-normal");
    
          var thisIndex = $(this).data("slick-index");
    
          if (thisIndex == nextSlide - 1) {
            shiftCard(this, "slick-left")
          } else {
            if (thisIndex == nextSlide + 1) {
              shiftCard(this, "slick-right")
            } else {
              if (thisIndex == nextSlide) {
                shiftCard(this, "slick-middle");
              } else {
                shiftCard(this, "slick-normal");
              }
            }
          }
        })
      }
    
      function shiftCard(clip, position) {
        $(clip);
        $(clip).addClass(position);
      }
    
      $(".filmstrip-carousel .slider")
        .on('afterChange init', function(event, slick, direction) {
          slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
          for (var i = 0; i < slick.$slides.length; i++) {
            var $slide = $(slick.$slides[i]);
            if ($slide.hasClass('slick-current')) {
              $slide.prev().addClass('prevdiv');
              $slide.prev().prev().prevAll().addClass('prevdiv-1');
    
              $slide.next().addClass('nextdiv');
              $slide.next().next().nextAll().addClass('nextdiv-1');
              break;
            }
          }
        })
        .on("beforeChange ", function(event, slick, currentSlide, nextSlide, prevSlide) {
          if (!$(this).hasClass("non-overlapping")) updateSlideScales(slick, currentSlide, nextSlide);
          slick.$slides.removeClass('prevdiv').removeClass('nextdiv').removeClass('nextdiv-1').removeClass('prevdiv-1');
        });
    
      $(".filmstrip-carousel .slider").slick("slickGoTo", 0);
    })
    0 回复  |  直到 6 年前