Vanilla Javascript CSS3 Fullscreen Responsive Slideshow
Easy to use Pure javascript and CSS3 Responsive Fullscreen Slideshow
Features
- Lightweight, No libraries required
- CSS3 Transitions
- Responsive
- Fullscreen
- Easy to use
Getting Started
Use the viewport meta tag to control layout on mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1">
Required HTML
<div id="vanilla-slideshow-container">
<div id="vanilla-slideshow">
<div class="vanilla-slide">
<img src="images/tiger1.jpg" alt="tiger">
content here ...
</div>
<div class="vanilla-slide">
<img src="images/tiger2.jpg" alt="tiger">
content here ...
</div>
<div class="vanilla-slide">
<img src="images/tiger3.jpg" alt="tiger">
content here ...
</div>
<div class="vanilla-slide">
<img src="images/tiger4.jpg" alt="tiger">
content here ...
</div>
</div>
<div id="vanilla-indicators"></div>
<div id="vanilla-slideshow-previous">
<img src="images/arrow-previous.png" alt="slideshow arrow">
</div>
<div id="vanilla-slideshow-next">
<img src="images/arrow-next.png" alt="slideshow arrow">
</div>
</div>
You can also use data-src and full path of image to display css background images
<div id="vanilla-slideshow">
<div class="vanilla-slide" data-src="images/tiger1.jpg">content here ...</div>
<div class="vanilla-slide" data-src="images/tiger2.jpg">content here ...</div>
<div class="vanilla-slide" data-src="images/tiger3.jpg">content here ...</div>
<div class="vanilla-slide" data-src="images/tiger4.jpg">content here ...</div>
</div>
- include css/vanillaSlideshow.css
- include js/vanillaSlideshow.min.js Or js/vanillaSlideshow.js
after including javascript file initilize slideshow
<script>
vanillaSlideshow.init();
</script>
Options
To customize functionality pass object to init function
<script>
vanillaSlideshow.init({
// auto slideshow, options: true or false
slideshow: true,
// slideshow delay
delay: 5000,
// display arrows, options: true or false
arrows: true,
// display indicators, options: true or false
indicators: true,
// start slideshow randomly, options: true or false
random: false,
// animation speed
animationSpeed: '1s'
});
</script>
Bower
bower install vanilla-slideshow
Contributing
- Fork it
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
License
See license.txt