sequencejs
Version:
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.
120 lines (102 loc) • 4.08 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Test - Sequence.js Theme</title>
<link href="css/sequence-theme.multiple-test.css" rel="stylesheet" media="all">
</head>
<body>
<h1>Multiple instance testing</h1>
<p>These instances test to make sure:</p>
<ul>
<li>multiple sliders work together</li>
<li>UI elements within a slider should only control that slider</li>
<li>UI elements outside of sliders, should control all sliders</li>
<li>Multiple UI elements can belong to one slider. (Slider 1 has elements on each of its slides)</li>
<li>Multiple pagination in slider 1 should correctly update (a red border around the revelant link in each slide)</li>
</ul>
<!-- Global Nav Buttons -->
<button class="seq-prev">Prev</button>
<button class="seq-autoplay">Stop</button>
<button class="seq-next">Next</button>
<div class="seq-pagination">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div id="sequence1" class="sequence">
<div class="seq-screen">
<ul class="seq-canvas">
<li>
<h2>Powered by Sequence.js</h2>
<h3>The open-source CSS animation framework</h3>
<button rel="sequence1" class="seq-prev">Prev</button>
<button rel="sequence1" class="seq-autoplay">Stop</button>
<button rel="sequence1" class="seq-next">Next</button>
<div rel="sequence1" class="seq-pagination">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</li>
<li>
<h2>Create Unique Animated Themes</h2>
<h3>For sliders, presentations, banners, accordions, and other step-based applications</h3>
<button rel="sequence1" class="seq-prev">Prev</button>
<button rel="sequence1" class="seq-autoplay">Stop</button>
<button rel="sequence1" class="seq-next">Next</button>
<div rel="sequence1" class="seq-pagination">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</li>
<li>
<h2>No Restrictions, Endless Possibilities</h2>
<h3>Use the HTML and CSS syntax you're used to. No JavaScript knowledge required.</h3>
<button rel="sequence1" class="seq-prev">Prev</button>
<button rel="sequence1" class="seq-autoplay">Stop</button>
<button rel="sequence1" class="seq-next">Next</button>
<div rel="sequence1" class="seq-pagination">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</li>
</ul>
</div>
</div>
<div id="sequence2" class="sequence">
<button rel="sequence2" class="seq-prev">Prev</button>
<button rel="sequence2" class="seq-autoplay">Stop</button>
<button rel="sequence2" class="seq-next">Next</button>
<div rel="sequence2" class="seq-pagination">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="seq-screen">
<ul class="seq-canvas">
<li>
<h2>Powered by Sequence.js</h2>
<h3>The open-source CSS animation framework</h3>
</li>
<li>
<h2>Create Unique Animated Themes</h2>
<h3>For sliders, presentations, banners, accordions, and other step-based applications</h3>
</li>
<li>
<h2>No Restrictions, Endless Possibilities</h2>
<h3>Use the HTML and CSS syntax you're used to. No JavaScript knowledge required.</h3>
</li>
</ul>
</div>
</div>
<script src="../../../scripts/imagesloaded.pkgd.min.js"></script>
<script src="../../../scripts/hammer.min.js"></script>
<script src="../../../scripts/sequence.js"></script>
<script src="scripts/sequence-theme.multiple-test.js"></script>
</body>
</html>