Free jQuery Box Roll 3D slider

For this post i desided to write a small plugin to create a HTML5/CSS3 jQuery 3D slideshow that everyone can use on their website.

About: Examples

Usage example:

  1. Add the javascript file jquery.boxroll-slider.js or jquery.boxroll-slider.min.js to your html documents
  2. Add the css file jquery.boxroll-slider.css to your documents
  3. Use this code woth your own selector to initialize the plugin
	$('#slide-container').boxRollSlider({
	 items: '.item', // default is the containers childre
	 timer: 7000, // interval to change slides default is 2000ms
	});

Here is an example of the HTML markup that you can use to build this slider. The content of the slides can be anything you like text, images you name it.

	<div id="slide-container">
	  <div class="item"><img src="img/1.jpg" width="1440" /></div>
	  <div class="item"><img src="img/2.jpg" width="1440" /></div>
	  <div class="item"><img src="img/3.jpg" width="1440" /></div>
	  <div class="item"><img src="img/4.jpg" width="1440" /></div>
	  <div class="item"><img src="img/5.jpg" width="1440" /></div>
	  <div class="item"><img src="img/6.jpg" width="1440" /></div>
	  <div class="item"><img src="img/7.jpg" width="1440" /></div>
	  <div class="item"><img src="img/8.jpg" width="1440" /></div>
	</div>

If height has changed you can also update the slider by calling this function

	$('#slide-container').boxRollSlider('update');

Tested on jQuery Versions - 1.8+. Should work on most modern browsers. Tested on Chrome, Firefox, IE (10,9), Opera and Mac Safari.

I also added a fallback if css animations are not supported. The plugin degrades to javascript crossfade. Just view the demo. If you want you can leave us a comment or visit our GitHub page.

Download ZIP Vist on GitHub View DEMO

Related posts

CSSDA WOTD - AL FOZAN GROUP

CSSDA WOTD - AL FOZAN GROUP

CSSDA WOTD - Palanga live

CSSDA WOTD - Palanga live

Palanga Live music festival

Palanga Live music festival

Faces & names

Faces & names

A cup design for coffee house

A cup design for coffee house

HORSE YEAR 2014

HORSE YEAR 2014