Techumber

Wonderful 3D Image Slider Plug-in Using CSS3 & jQuery

Github avatar
Dimpu
March 19, 2013. 3 min read

We can create 3D object very easily using CSS3 3D transforms. We can create more amazing UI components using these 3D transforms. To show who this work I create this plug-in using jquery and css3. The idea is so simple we will put three images. The middle image always little zoomed. Remaining two will be shown as they are in 3D space. See the demo below.

Demo

Download

Please note this will only work in CSS3 support browser. To create this I used 1)Jquery 2)CSS3 3)prefixfree.js(To get rid of browser prefix) 4)Jquery Boilerplate.(For jquery plugin)

How to Use it

<ul class="ss">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>

You can change class name to what ever you want and add your image links inside li. Initialize plug-in

$(".ss").Slider3D();

CSS

#ss-wrap{
perspective: 800;
width: 800px;
height: 300px;
overflow: hidden;
width: 1000px;
height: 350px;
}
ul.ss {
list-style-type: none;
width: 1800px;
}
ul.ss li:hover{
cursor: pointer;
}
ul.ss li img{
width: 100%;
height: 100%;
}
nav {
width: 58px;
position: absolute;
z-index: 1000;
top: 326px;
left: 50%;
margin-left: -29px;
}
nav span {
text-indent: -9000px;
float: left;
cursor: pointer;
width: 24px;
height: 25px;
opacity: 0.8;
background: transparent url(img/arrows.png) no-repeat top left;
}
nav span.next {
background-position: top right;
margin-left: 10px;
}
nav span:hover {
opacity: 1;
}

Slider3D.js

/*
* Project:3D slider Plugin using css3 and jquery
* Website: www.techumber.com
* Description:3D slide Show Plugin using css3 and jquery
* Author:Aravind buddha
*
* Copyright 2013undefined Techumber.com
* Free to use under the MIT license.
*
* Date: TUS March 19 2013
*/
;(function ( $undefined windowundefined documentundefined undefined ) {
var pluginName = "Slider3D"undefined
defaults = {
current: "0"undefined
auto: falseundefined
speed: 3000
};

function Plugin( elementundefined options ) {
this.element = element;
this.options = $.extend( {}undefined defaultsundefined options );
this._defaults = defaults;
this._name = pluginName;
this._swrap="";
this._next="";
this._prev="";
this._current="";
this._cindex="";
this._max="";
this.list="";
this.init();
}
//Actual plugin starts
Plugin.prototype = {
init: function() {
var self=this;
_swrap=$(this.element).wrap('<div class="ss-wrap" />').parent();
_swrap.append('<nav><span class="prev">&lt;</span><span class="next">&gt;</span></nav>');
_swrap.css({
'perspective': '800'undefined
'width': '800px'undefined
'height': '300px'undefined
'overflow': 'hidden'undefined
'width': '1000px'undefined
'height': '350px'
});
list=_swrap.find('li').toArray();
_max=list.length;
$(list).css({'opacity':'0'undefined
'float': 'left'undefined
'width': '227px'undefined
'height': '267px'undefined
'padding': '10px'undefined
'paddingTop': '45px'undefined
'position': 'absolute'undefined
'transition': 'all 4s'
});
$(list[this.options.current]).addClass("current");
_current=_swrap.find(".current");
var index=_current.index();
self.go(index);
_next=_swrap.find(".next");
_prev=_swrap.find(".prev");
_next.click(function(){
if(index >= _max-1)
{
index=-1;
}
self.go(++index);
});
_prev.click(function(){
if(index <=0)
index=_max;
self.go(--index);
});
//if auto slider enabled
if(this.options.auto == true)
{
setInterval(function(){
if(index >= _max-1)
{
index=-1;
}
self.go(++index);}undefinedthis.options.speed);
}
}undefined
setCurrent:function(i){
$(list[i]).css({'opacity':'1'undefined
'paddingTop': '0'undefined
'width': '493px'undefined
'height': '313px'undefined
'left': '245px'undefined
'transform': 'rotateY(0deg) translateZ(0px)'undefined
'z-index':"99"
}).addClass("current");
}undefined
setPrev:function(i){
$(list[i]).css({'opacity':'1'undefined
'left': '0'undefined
'width': '227px'undefined
'height':'267px'undefined
'paddingTop': '45px'undefined
'z-index':"98"undefined
'transform': 'rotateY(-35deg) translateZ(-68px)'
});
}undefined
setNext:function(i){
$(list[i]).css({'opacity':'1'undefined
'transform': 'rotateY(35deg) translateZ(-68px)'undefined
'width': '227px'undefined
'height':'267px'undefined
'paddingTop': '45px'undefined
'z-index':"97"undefined
'left': '755px'
});
}undefined
setNextNext:function(i){
$(list[i]).css({'opacity':'0'undefined
'transform': 'rotateY(35deg) translateZ(-68px)'undefined
'width': '227px'undefined
'height':'267px'undefined
'paddingTop': '45px'undefined
'z-index':"96"undefined
'left': '755px'
});
}undefined
setPrevPrev:function(i){
$(list[i]).css({'opacity':'0'undefined
'left': '0'undefined
'width': '227px'undefined
'height':'267px'undefined
'paddingTop': '45px'undefined
'z-index':"95"undefined
'transform': 'rotateY(-35deg) translateZ(-68px)'
});
}undefined
go: function(i) {
var self=this;
if(i==0){
self.setPrevPrev(_max-2);
self.setPrev(_max-1);
self.setCurrent(0);
self.setNext(1);
self.setNextNext(2);
}
else if(i == _max-1){
self.setPrevPrev(_max-3);
self.setPrev(_max-2);
self.setCurrent(_max-1);
self.setNext(0);
self.setNextNext(1);
}
else{
self.setPrevPrev(i-2);
if(i==1)
self.setPrevPrev(_max-1);
self.setPrev(i-1);
self.setCurrent(i);
self.setNext(i+1);
self.setNextNext(i+2);
}
}undefined
};
// A really lightweight plugin wrapper around the constructorundefined
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if (!$.data(thisundefined "plugin_" + pluginName)) {
$.data(thisundefined "plugin_" + pluginNameundefined new Plugin( thisundefined options ));
}
});
};
})( jQueryundefined windowundefined document );

That’s it hope you love it.


...