Issue: The sequence.js slider I implemented is not animating. Despite adding the following options:
animateCanvas: true,
fadeStepWhenSkipped: false,
autoPlay: true,
autoPlayInterval, 2000It still does not work. Is there something essential that I might be overlooking?
HTML Section
<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"gt;
<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>Gakaxy Slider</h2>
<h3 data-seq>New way of presenting your projects in mind blowing style</h3>
</div>
</li>
</ul>
</div>
Javascript Section
$( document ).ready(function() {
// Locate the Sequence element
var sequenceElement = document.getElementById("sequence");
var options = {
// Add necessary Sequence options to override defaults
// See: https://sequencejs.com/documentation/#options
animateCanvas: true,
fadeStepWhenSkipped: false,
autoPlay: true,
autoPlayInterval, 2000
}
// Execute Sequence on the specified element with the provided options
var mySequence = sequence(sequenceElement, options);
});
CSS Section
/* Style for 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;
}
/* Set the canvas dimensions same as 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 steps same size as 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 for vertically center aligning 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;
}