slider-pro-js
Version:
Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use
119 lines (112 loc) • 3.52 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider Pro</title>
<link rel="stylesheet" type="text/css" href="../../../src/core/slider-pro.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../../../src/add-ons/thumbnails/thumbnails.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="../../../src/add-ons/thumbnail-touch-swipe/thumbnail-touch-swipe.css" media="screen"/>
<style>
body {
margin: 0;
}
.slider-pro {
margin-left: 0;
}
.sp-thumbnail-container:nth-child(1) {
background-color: black;
}
.sp-thumbnail-container:nth-child(2) {
background-color: white;
}
.sp-thumbnail-container:nth-child(3) {
background-color: red;
}
.sp-thumbnail-container:nth-child(4) {
background-color: blue;
}
.sp-thumbnail-container:nth-child(5) {
background-color: green;
}
.sp-thumbnail-container:nth-child(6) {
background-color: yellow;
}
.sp-thumbnail-container:nth-child(7) {
background-color: pink;
}
.sp-thumbnail-container:nth-child(8) {
background-color: grey;
}
.sp-thumbnail-container:nth-child(9) {
background-color: maroon;
}
.sp-thumbnail-container:nth-child(10) {
background-color: orange;
}
</style>
<script type="module">
import SliderPro from '../../../src/core/slider-pro.js';
import Thumbnails from '../../../src/add-ons/thumbnails/thumbnails.js';
import ThumbnailTouchSwipe from '../../../src/add-ons/thumbnail-touch-swipe/thumbnail-touch-swipe.js';
document.addEventListener( 'DOMContentLoaded', () => {
const slider = new SliderPro( '#my-slider', {
addOns: [ Thumbnails, ThumbnailTouchSwipe ],
width: 800,
height: 600,
thumbnailsPosition: 'right',
thumbnailWidth: 100,
thumbnailHeight: 100
});
});
</script>
</head>
<body>
<div id="my-slider" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="../images/default.gif"/>
</div>
</div>
<div class="sp-thumbnails">
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
<img class="sp-thumbnail" src="../images/small.gif"/>
</div>
</div>
</body>
</html>