Have a look at the slider here
- Auto play with a timer that resets when next, back or a random image is clicked
- Super lightweight (3kb)
- Easy to use
- Custom left and right cursors (shown in second image below)
- Simple customisation
- Vanilla JavaScript (no jQuery)
Taken by me!
Simply include the slider.min.js file at the bottom of your .html file, shown below.
For every image you include in the .banner div, you need to have a <a href="1"></a> with the corresponding image number.
<!DOCTYPE html>
<html>
<head>
<title>lightweight-slider</title>
</head>
<body>
<div class="banner" data-height="600" data-width="100%" data-slide-speed="900" data-autoslide="5000">
<img src="1.jpg" class="slider">
<img src="2.jpg" class="slider">
<img src="3.jpg" class="slider">
<div class="previous" data-previous-cursor="left.png"></div>
<div class="next" data-next-cursor="right.png"></div>
<div class="links">
<a href="1"></a>
<a href="2"></a>
<a href="3"></a>
</div>
</div>
<script src="slider.min.js"></script>
</body>
</html>Height:
- Add
data-height="600"to the.bannerdiv. Height is in pixels.
Width:
- Add
data-width="100%"to the.bannerdiv. Width is in percentages.
Slide transition speed:
- Add
data-slide-speed="900"to the.bannerdiv. Speed is in milliseconds.
Autoslide:
- Add
data-autoslide="5000"to the.bannerdiv. Time is in milliseconds.
Cursors:
- Add
data-previous-cursor="left.png"to the.previousdiv. You can provide an image as shown in the example, or leave blank to use the CSS attributecursor: w-resize. - Add
data-next-cursor="right.png"to the.nextdiv. You can provide an image as shown in the example, or leave blank to use the CSS attributecursor: e-resize.