Quickstart: Use Tiny Slider 2 in your project
masterTo use Tiny Slider 2, follow these three steps:
- Add CSS: Include the
tiny-slider.cssfile. If you need to support IE8, include the IE8 polyfill. - Add markup: Create a container element (e.g., a
divorul) with child elements representing the slides. - Initialize the slider: Call the
tns()function. You can include the script via a CDN, import it via a bundler like Webpack/Rollup, or use an ES module import.
<!-- 1. Add CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->
<!-- 2. Add markup -->
<div class="my-slider">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<!-- 3. Call tns() using ES Modules -->
<script type="module">
import {tns} from './src/tiny-slider.js';
var slider = tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true
});
</script>