javascript - Sequence.js Slider 不自动播放？

Question

问题:我的 sequence.js slider 没有动画。不知道为什么，因为我添加了这些选项

animateCanvas: true, fadeStepWhenSkipped:假， 自动播放:真， 自动播放间隔，2000

还是不行。我错过了什么吗？

HTML

<div id="sequence">
  <ul class="seq-canvas">

    <li class="step1">
      <div class="content animated-element">
        <h2 data-seq>Powered by Sequence.js</h2>
        <h3 data-seq>The open-source CSS animation framework.</h3>
      </div>
    </li>

    <li class="step2">
      <div class="content">
        <h2 data-seq>Create Unique Animated Themes</h2>
        <h3 data-seq>For responsive sliders, presentations, <br />banners, and other step-based applications.</h3>
      </div>
    </li>

    <li class="step3">
      <div class="content">
        <h2 data-seq>No Restrictions, Endless Possibilities</h2>
        <h3 data-seq>Use the HTML and CSS syntax you're used to. <br />No JavaScript knowledge required.</h3>
      </div>
    </li>

  </ul>
</div>

JS

$( document ).ready(function() {
         // Get the Sequence element
  var sequenceElement = document.getElementById("sequence");

  var options = {
    // Place your Sequence options here to override defaults
    // See: https://sequencejs.com/documentation/#options
    // keyNavigation: true,
    animateCanvas: true,
    fadeStepWhenSkipped: false,
    autoPlay: true,
    autoPlayInterval, 2000

  }

  // Launch Sequence on the element, and with the options we specified above
  var mySequence = sequence(sequenceElement, options);

}); 

CSS

/* Style the Sequence container SLIDER */
#sequence {
  position: relative;
  width: 100%;
  height: 585px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  font-family: sans-serif;
}

/* Reset */
#sequence .seq-canvas,
#sequence .seq-canvas > * {
  margin: 0;
  padding: 0;
  list-style: none;

}

/* Make the canvas the same dimensions as the container and prevent lines from
   wrapping so each step can sit side-by-side */
#sequence .seq-canvas {
  position: absolute;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  font-size: 0;
}

/* Make the steps the same size as the container and sit side-by-side */
#sequence .seq-canvas > * {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: center;
  color: white;
}

/* Used to vertically center align the .content element */
#sequence .seq-canvas > li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Vertically center align the .content element */
#sequence .content {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4%;
  font-size: 16px;
}

#sequence .step1 {
  background-color: #279fe5;
}

#sequence .step2 {
  background-color: #f96852;
}

#sequence .step3 {
  background-color: #2bbf8e;
}

#sequence h2,
#sequence h3 {
  margin: 0;
  display: block;
  line-height: 120%;
}

#sequence h2 {
  margin-bottom: .5em;
  font-family: 'Roboto', sans-serif;
  font-size: 2.6em;
}

#sequence h3 {
  font-size: 1.4em;
}

Answer 1

在您的代码中您错过了 : autoPlayInterval: 2000; `