如何在shopify的大西洋主题中制作滑块自动播放？

Question

以下代码适用于 site.js 中的 Slider..

 SlideshowView = (function(_super) {

    __extends(SlideshowView, _super);

    function SlideshowView() {
      return SlideshowView.__super__.constructor.apply(this, arguments);
    }

    SlideshowView.prototype.el = $('.slideshow');

    SlideshowView.prototype.initialize = function() {
      var _this = this;
      this.slideshow = $('.slideshow');
      this.slides = this.slideshow.find('.slide');
      this.jumpLinksWrap = $('.jump-to-slide');
      this.setup();
      return Window.resize(function() {
        return _this.slideshow.css({
          height: _this.slides.filter('.active').height()
        });
      });
    };




    SlideshowView.prototype.events = {
      'click .next': 'rotate',
      'click .prev': 'rotate',
      'click .jump-to-slide li:not(.active)': 'rotate'
    };




    SlideshowView.prototype.setup = function() {
      var i, _fn, _i, _len, _ref, _slide,
        _this = this;
      this.slides.first().addClass('first');
      this.slides.last().addClass('last');
      _ref = this.slides;
      _fn = function() {
        var slide;
        slide = _slide;
        if (Settings.slideshowPagination && _this.slides.length > 0) {
          _this.jumpLinksWrap.append($('<li>'));
        }
        if (i === 0) {
          slide = $(slide);
          return slide.imagesLoaded(function() {
            return slide.fadeTo('200', 1, function() {
              var height;
              height = slide.height();
              slide.css('z-index', 2000).addClass('active');
              return slide.parent().css('height', height);
            });
          });
        }
      };
      for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
        _slide = _ref[i];
        _fn();
      }
      this.jumpLinks = this.jumpLinksWrap.find('li');
      this.jumpLinksWrap.find('li:first').addClass('active');
      if (this.slides.length === 1) {
        return this.slideshow.find('.next, .prev, .jump-to-slide').remove();
      }
    };

    SlideshowView.prototype.rotate = function(e) {
      var currentJumpLink, currentSlide, currentSlidePosition, direction, fadeSpeed, isFirst, isLast, jumpLinks, jumpLinksWrap, jumpPosition, upcomingJumpLink, upcomingSlide, upcomingSlidePosition, _i, _len, _ref,
        _this = this;
      direction = ($(e.currentTarget)).attr('class');
      currentSlide = this.$el.find('.slide.active');
      currentSlidePosition = currentSlide.eq();
      jumpPosition = ($(e.currentTarget)).index();
      isFirst = currentSlide.hasClass('first');
      isLast = currentSlide.hasClass('last');
      fadeSpeed = 400;
      if (direction === 'next') {
        upcomingSlide = isLast ? this.slides.first() : currentSlide.next();
      } else if (direction === 'prev') {
        upcomingSlide = isFirst ? this.slides.last() : currentSlide.prev();
      } else {
        upcomingSlide = this.slides.eq(jumpPosition);
      }
      upcomingSlidePosition = upcomingSlide.index();
      _ref = this.jumpLinksWrap;
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        jumpLinksWrap = _ref[_i];
        jumpLinksWrap = $(jumpLinksWrap);
        jumpLinks = jumpLinksWrap.find('li');
        upcomingJumpLink = jumpLinks.eq(upcomingSlidePosition);
        currentJumpLink = jumpLinks.filter('.active');
        currentJumpLink.removeClass('active');
        upcomingJumpLink.addClass('active');
      }
      this.slideshow.css({
        'height': upcomingSlide.height()
      });
      currentSlide.fadeTo(fadeSpeed, 0, function() {
        return currentSlide.removeClass('active');
      });
      return upcomingSlide.fadeTo(fadeSpeed, 1, function() {
        return upcomingSlide.addClass('active');
      });
    };

    return SlideshowView;



  })(Backbone.View);

Answer 1

您可以使用 Javascript / jQuery 模拟幻灯片下一步按钮的点击，以获得类似自动播放的行为：

setInterval(function() {
  $('.slideshow .next').click();
}, 5000); // <- slide show delay