This time, we will introduce in detail how to implement an image slide gallery using “lightSlider.js,” a very lightweight and easy-to-use slider library. Even beginners can handle it easily, and since it supports swipe for smooth operation, it can be expected to be used on many websites.
Introduction
In modern websites, visual elements are extremely important, and especially image slideshows are one of the most effective means to grab users’ attention. In this article, we will explain how to create a slide gallery that smoothly displays multiple images using a JavaScript library called lightSlider.js. It is chosen for its simplicity and lightweight design, making it easy for beginners to use.
Features of lightSlider.js
- Lightweight: Operates with minimal code and does not affect page loading speed.
- Simple settings: With basic knowledge of HTML and CSS, it is easy to set up and customize.
- Responsive support: Optimized for display on various devices.
- Swipe support: Compatible with touch operations, providing a comfortable experience on smartphones and tablets.
Customize CSS
Load the lightslider.css file. Add CSS to adjust the appearance of the slider. Basic styling is included in lightslider.css, but here we will apply some customizations. This is the CSS description for the slide area (.demo).
<link rel="stylesheet" href="lightslider.css"/>
<style>
body {
margin: 0;
padding: 0;
font-size: 18px;
text-align: center;
width:100%;
margin:0px;
padding:0px;
}
h1{
text-align: center;
font-size: 20px;
line-height: 2em;
padding: 30px 0 0 0;
}
ul{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.content-slider li{
background-color: #666666;
text-align: center;
color: #FFF;
}
.content-slider h3 {
font-size: 20px;
margin: 0;
padding: 70px 0;
}
.demo{
width: 600px;
margin: 0 auto
}
.demo ul li img{
width: 100%;
}
.lSAction > a {
background-image: url(controls.png);
}
</style>
Write HTML
Create the HTML structure to display the image slider. Below is the basic structure.
We prepared the main image and thumbnail slide gallery (id=”image-gallery”) and the horizontal image slider (id=”content-slider”).
<h1>Display a multiple-image slide gallery with swipe support using the lightweight slider lightslider.js.<br>Try sliding left and right by dragging with your mouse.</h1>
<div class="demo">
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="1.jpg">
<img src="1.jpg" />
</li>
<li data-thumb="2.jpg">
<img src="2.jpg" />
</li>
<li data-thumb="3.jpg">
<img src="3.jpg" />
</li>
<li data-thumb="4.jpg">
<img src="4.jpg" />
</li>
<li data-thumb="5.jpg">
<img src="5.jpg" />
</li>
<li data-thumb="6.jpg">
<img src="6.jpg" />
</li>
<li data-thumb="7.jpg">
<img src="7.jpg" />
</li>
<li data-thumb="8.jpg">
<img src="8.jpg" />
</li>
</ul>
<br>
<br>
<ul id="content-slider" class="content-slider">
<li>
<h3>1</h3>
</li>
<li>
<h3>2</h3>
</li>
<li>
<h3>3</h3>
</li>
<li>
<h3>4</h3>
</li>
<li>
<h3>5</h3>
</li>
<li>
<h3>6</h3>
</li>
</ul>
</div>
Set JavaScript
Load jquery-1.11.0.min.js and lightslider.js files. Use lightSlider.js to implement the slider function. Place the following script in the appropriate location in your HTML file.
Write $(‘gallery or slider area’).lightSlider({options}). Options can include enabling gallery display, infinite loop, auto slide, and more.
<script src="jquery-1.11.0.min.js"></script>
<script src="lightslider.js"></script>
<script>
$(document).ready(function() {
// Main image and thumbnail slide gallery
$('#image-gallery').lightSlider({
gallery:true,
item:1,
thumbItem:8,
slideMargin: 0,
speed:500,
auto:true,
loop:true,
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
}
});
// Horizontal image slider
$("#content-slider").lightSlider({
loop:true,
keyPress:true
});
});
</script>
Demo page: Display a multiple-image slide gallery with swipe support using the lightweight slider lightslider.js
Source: JQuery lightSlider
Conclusion
In this article, we introduced how to easily implement a slide gallery with multiple images using lightSlider.js. Thanks to its lightweight and simple design, even beginners can easily add a beautiful image slider to their web pages. Furthermore, it offers high flexibility for customization, allowing you to adjust it according to your own projects. If you’re interested, be sure to try it on your own site.
※ Please use at your own risk when reusing.
Do not reuse the Google Analytics tag inside the head tag of the demo page.
