Minimalist Background Slideshow Plugin - jQuery slideshow.js

File Size: | 4.38 KB |
---|---|
Views Total: | 3576 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A minimal, simple-to-use, jQuery based, sliding or cross-fading slideshow that dynamically loads backgrounds from an array of images.
How to use it:
1. Load the slideshow.js
after loading jQuery.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"> </script> <script src="slideshow.js"></script>
2. Create a new Slideshow instance and specify the container in which the slideshow will be placed.
<div class="example" id="demo"> </div>
var slideshow = new Slideshow({ backgroundElementId: "demo" });
3. Define an array of background images for the slideshow.
slideshow.setImages(['1.jpg','2.jpg','3.jpg',]);
4. Activate the background slideshow.
slideshow.run();
5. Config the animation speed & autoplay interval.
var slideshow = new Slideshow({ tickInterval: 5000, transitionTime: 800, backgroundElementId: "demo" });
9. Make the background images always be centered in the container.
.example { background-position: 50% 50%; background-size: cover; }
10. Set the transition type you'd like to use. Possible transitions: slideHorizontal
or fadeInOut
.
var slideshow = new Slideshow({ effect: "slideHorizontal" });
Changelog:
2020-06-16
- Generated html ids to avoid conflict
2019-10-08
- Keep original background-size css property for temporary layer div
2019-09-18
- Better horizontal slide handling
This awesome jQuery plugin is developed by doomy. For more Advanced Usages, please check the demo page or visit the official website.