A lightweight slideshow for jQuery.
Just copy files from the source folder into your project. Images should be in the same folder as jquery.lightshow.css.
Then add these two lines into <head> section of your page.
<script src="js/jquery.lightshow.js"></script>
<link href="css/jquery.lightshow.css" rel="stylesheet">Your slideshow has to have this structure.
<div class="my-slideshow">
<ul>
<li data-title="Example title 1">
<img src="images/1.jpg" alt="">
</li>
<li data-title="Example title 2">
<img src="images/2.jpg" alt="">
</li>
</ul>
</div>There can be anything inside the <li>...</li>, not just a single image.
The only thing left to do is triggering the LightShow. This will run it with default settings.
$(document).ready(function() {
$(".my-slideshow").lightshow();
});LightShow comes with several options. These are their default values.
$(document).ready(function() {
$(".my-slideshow").lightshow({
autoplay : true, // (boolean) animate automatically
pause : true, // (boolean) pause on hover
duration : 3000, // (integer) single slide duration, in milliseconds
animation : 500, // (integer) animation duration, in milliseconds
transition : "fade", // (string) transition between slides (fade, slide)
controls : true, // (boolean) show controls
controls_always : false, // (boolean) always show controls
big_controls : false, // (boolean) big controls - half of an image
circles : true, // (boolean) jumping between slides using little circles below LightShow
title : false, // (boolean) show title from 'data-title' attribute of <li>
title_always : false, // (boolean) always show title
change_url : false, // (boolean) put current slide number into url
keyboard : false, // (boolean) enables keyboard navigation - left and right arrow
responsive : false, // (boolean) LightShow is responsive by default, but sometimes big controls aren't as big as they should be - this corrects them
different_sizes : false, // (boolean) set to true if your slides have different sizes (fixes transitions between them)
after_autoplay : function() {}, // callback function after slide is changed by autoplay
after_next : function() {}, // callback function after next button is clicked
after_prev : function() {} // callback function after prev button is clicked
});
});If your encounter problems with the size of LightShow on a responsive website, trigger it after page is fully loaded like this.
$(window).load(function() {
$(".my-slideshow").lightshow();
});Also, it may be necessary to set the responsive option to true when using big_controls.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent