Lite Slider is a simple JavaScript library that uses CSS and JavaScript to create a lightweight and accessible alternative to popular slider and carousel libraries.
If you need additional functionality, consider using a more fully-featured library like Slick slider or Tiny slider.
You can clone or download the repo and copy the files into your project or you can use jsdelivr to access them. The example provided here is using jsdelivr as this is the quickest and easiest way to get started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>liteslider</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orcing/liteslider@1.3.1/dist/slider.css">
</head>
<body>
<div class="slider">
<div class="slider-nav hidden">
<button type="button" class="slider-button slider-prev">Previous</button>
<button type="button" class="slider-button slider-next">Next</button>
</div>
<div class="slider-inner">
<div class="slider-item"><img alt="" src="./images/img1.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img2.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img3.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img4.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img5.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img6.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img7.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img8.jpg"></div>
<div class="slider-item"><img alt="" src="./images/img9.jpg"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/orcing/liteslider@1.3.1/dist/index.js"></script>
<script>
slider();
</script>
</body>
</html>
See demo/index.html for more examples.
The included CSS is minimal but ensures that the slider items snap to the grid and space roughly to the required size without any JavaScript.
The idea is to keep the amount of additional JavaScript to a bare minimum by using native CSS features as far as possible.
In particular, we rely on scroll-snap to ensure that slider elements line up to the start of the scroll area when a user scrolls.
Call slider() after including the JS file. All elements with the class
slider will be initialized automatically.
You can have multiple sliders on the same page. Each .slider element will
be initialized.
Currently, there are no configuration options. The slider is designed to be as simple as possible.
alt text for best accessibility.Lite Slider works in all modern browsers that support CSS scroll-snap and ES6 JavaScript.
Tested on:
slider()
Initializes all sliders on the page. No arguments required.
MIT License. See LICENSE for details.