Written by 
Creating rotate slider with easing effects
Today I decide to make another one slider (jQuery), where image is scrolled on its axis (emulating 3D). Also I will allow to use custom easing effects for switching of images. In result – this will our own jQuery plugin.
Here are our package and check demo:
Live Demo
download in package
Lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is source code of our sample:
index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Creating rotate slider with easing effects | Script tutorials demo</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<h3><a href="#">My Slider2 example</a></h3>
<div class="my_slider" id="slider1">
<img src="data_images/pic1.jpg" alt="" />
<img src="data_images/pic2.jpg" alt="" />
<img src="data_images/pic3.jpg" alt="" />
<img src="data_images/pic4.jpg" alt="" />
<img src="data_images/pic5.jpg" alt="" />
</div>
<div class="my_slider" id="slider2">
<img src="data_images/pic6.jpg" alt="" />
<img src="data_images/pic7.jpg" alt="" />
<img src="data_images/pic8.jpg" alt="" />
<img src="data_images/pic9.jpg" alt="" />
<img src="data_images/pic10.jpg" alt="" />
</div>
</div>
</body></html>
Here we can see 2 defined sliders with images. Just DIV (parent) with images inside).
Step 2. CSS
Here are used CSS file with styles of our demo:
css/main.css
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;overflow:hidden;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.my_slider {float:left}
/*My slider2 styles*/
.my_slider {
width:500px;
height:340px;
overflow: hidden;
position:relative;
list-style: none outside none;
padding:0;
margin:0;
}
.my_slider img {
position: absolute;
top: 0px;
left: 0px;
opacity:0;
width:500px;
}
.my_slider img:first-child {
opacity:1;
}
Step 3. JS
Here are our main JS file:
js/main.js
(function($){
$.fn.MySlider = function(interval, e, d) {
var slides = $(this.selector).children();
var amount = slides.length;
var w = slides[0].width;
var h = slides[0].height;
var hw = h / 2;
var eas = e;
var dur = d;
var iCur=0;
var iNext=1;
// we will animate opacity, height and top property of current and next slides
function run() {
$(slides[iNext]).animate({
opacity: 0,
height: 0,
top: hw,
}, {
duration: dur,
specialEasing: {
height: eas
}
});
$(slides[iCur]).animate({
opacity: 0,
height: 0,
top: hw,
}, {
duration: dur,
specialEasing: {
height: eas
},
complete: function() {
$(slides[iCur]).animate({
opacity: 0,
height: h,
top:0,
}, {
duration: dur,
specialEasing: {
height: eas
}
});
$(slides[iNext]).animate({
opacity: 1,
height: h,
top:0,
}, {
duration: dur,
specialEasing: {
height: eas
}
});
iCur++;
iNext++;
if (iCur >= amount) {
iCur = 0;
}
if (iNext >= amount) {
iNext = 0;
}
}
});
// loop
setTimeout(run, interval);
}
// first run
if (amount > 1)
setTimeout(run, dur / 2);
};
})(jQuery);
// custom initialization
jQuery(window).load(function() {
$('#slider1').MySlider(5000, 'linear', 1000);
$('#slider2').MySlider(5000, 'easeOutCirc', 1000);
});
Our new slider accepting 3 variables: interval between sliding, easing method, and duration of switching photos effect. Here are sample: $(‘#slider1′).MySlider(5000, ‘linear’, 1000);
js/jquery-1.5.2.min.js and js/jquery.easing.1.3.js
This is default jQuery library and easing addon. Available in our package.
Live Demo
download in package
Conclusion
Today we have learned how to create another slider with scrolling images on its axis. Hope that you will like that effect and you will use this in your own projects. Good luck!
| I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC'; | If you Enjoyed our article don't forget to Share the love with your friends. |
