Simple jQuery Slider Plugin with 3D Flip Effect - Impulse Slider

Simple jQuery Slider Plugin with 3D Flip Effect - Impulse Slider
File Size: 586KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Impulse Slider is a simple jQuery plugin that takes advantage of jQuery and CSS3 transforms / transitions to create a slider with 3D image flip effects. It supports all CSS3 enabled browsers and has the ability to custom transition durations & effects and CSS.

How to use it:

1. Markup html structure

<div class="nav"> 
<span class="left arrow" style="">&lt;</span> 
<span class="right arrow">&gt;</span> 
</div>

<div id="cubeCarousel">
<div id="cubeSpinner">
<div class="face one"> <img class="img_slider active" src="img/1.jpg"> </div>
<div class="face two"> <img class="img_slider" src="img/2.jpg"> </div>
<div class="face three"> <img class="img_slider" src="img/3.jpg"> </div>
<div class="face four"> <img class="img_slider" src="img/4.jpg"> </div>
</div>
</div>

2. The CSS

.nav {
margin-top: 50px;
z-index: 9999;
position: absolute;
}
.arrow {
width: 20px;
height: 100px;
background: #0066cc;
color: #fff;
font-size: 40px;
text-align: center;
margin-top: -50px;
line-height: 100px;
cursor: pointer;
font-weight: normal;
padding: 5px;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity = 70 );
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity = 70);
filter: alpha(opacity = 70);
}
.arrow:hover {
background: #cccccc;
}
.right {
margin-left: 400px;
}
.left {
position: relative;
}
/* Slider Styles */
.container {
}
#cubeCarousel {
-webkit-perspective: 800;
-moz-perspective: 800px;
-o-perspective: 800;
perspective: 800px;
margin: 50px 0px 0px 80px;
border-style: dotted;
border-width: 1px;
}
#cubeCarousel #cubeSpinner {
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cubeCarousel .face {
position: absolute;
padding: 0px;
}

3. Include jQuery library and jQuery Impulse Slider on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../jquery.impulse.slider-0.2.js"></script> 

4. Call the function with options

<script type="text/javascript">
$(window).load(function(){
  $('#cubeSpinner').impulseslider({
  height: 200,
  width: 300,
  pauseTime: 5000,
  transitionDuration: 1500,
  transitionEffect: "linear",
  autostart: true,
  rightSelector: ".right",
  leftSelector: ".left",
  directionRight: true,
  containerSelector: "#cubeCarousel",
  spinnerSelector: "#cubeSpinner"
  });
});
</script>

More examples:

Change log:

v0.3.0 (2013-08-30)

  • added more examples

This awesome jQuery plugin is developed by twoimpulse. For more Advanced Usages, please check the demo page or visit the official website.