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