slider.js.org
Version:
Slider.js - the simplest native javascript plugin
88 lines (78 loc) • 5.53 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#000000">
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="/assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link type="text/css" rel="stylesheet" href="src/css/slider.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="assets/css/docs.css" media="screen,projection"/>
</head>
<body>
<main>
<h1><b>Slider.js</b> - the simplest native javascript plugin</h1>
<section class="center">
<div class="title">Settings</div>
<div class="button">
<input type="checkbox" id="pager" value="pager" checked="checked" disabled="disabled" />
<label for="pager">Pager</label>
</div>
<div class="button">
<input type="checkbox" id="arrows" value="arrows" checked="checked" disabled="disabled" />
<label for="arrows">Arrows</label>
</div>
<div class="button">
<input type="checkbox" id="swipe" value="swipe" checked="checked" disabled="disabled" />
<label for="swipe">Swipe</label>
</div>
<div class="textgroup">
<div class="title">Slider speed</div>
<div class="input"><input type="number" value="1000" disabled="disabled" /></div>
<div class="units">ms</div>
</div>
<div class="button">
<input type="checkbox" id="loop" value="loop" checked="checked" disabled="disabled" />
<label for="loop">Loop</label>
</div>
<div class="button">
<input type="checkbox" id="pauseOnHover" value="pauseOnHover" checked="checked" disabled="disabled" />
<label for="pauseOnHover">Pause on hover</label>
</div>
<div class="textgroup">
<div class="title">Slider interval</div>
<div class="input"><input type="number" value="5000" disabled="disabled" /></div>
<div class="units">ms</div>
</div>
</section>
<div class="slider" data-slider>
<div class="slide-content slide-content-1">1</div>
<div class="slide-content slide-content-2">2</div>
<div class="slide-content slide-content-3">3</div>
<div class="slide-content slide-content-4">4</div>
<div class="slide-content slide-content-5">5</div>
</div>
<section>
<div class="title">Code</div>
<div class="content">
<pre>
<span style="color:#a65700; "><</span><span style="color:#800000; font-weight:bold; ">div</span> <span style="color:#074726; ">data</span><span style="color:#274796; ">-slider</span><span style="color:#808030; ">=</span><span style="color:#0000e6; ">"{'arrows': true, 'pager': true}"</span><span style="color:#a65700; ">></span>
...
<span style="color:#696969; "><!-- Wrapping list of content here --></span>
...
...
<span style="color:#a65700; "></</span><span style="color:#800000; font-weight:bold; ">div</span><span style="color:#a65700; ">></span>
</pre>
</div>
</section>
</main>
<!-- Fork me on GitHub -->
<a class="github-corner" href="https://github.com/nikiforov-org/slider.js.org" title="Fork me on GitHub"><svg width="80" height="80" viewbox="0 0 250 250"><title>Fork me on GitHub</title><path d="M0 0h250v250"></path><path class="octo-arm" d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor" style="transform-origin:130px 110px;"></path><path class="octo-body" d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="currentColor"></path></svg><style> .github-corner svg{position:absolute;right:0;top:0;mix-blend-mode:darken;color:#ffffff;fill:#000;}.github-corner:hover .octo-arm{animation:octocat-wave .56s;}@keyframes octocat-wave{0%, 100%{transform:rotate(0);}20%, 60%{transform:rotate(-20deg);}40%, 80%{transform:rotate(10deg);}}</style></a>
<script type="text/javascript" src="src/js/slider.js"></script>
</body>
</html>