Rotate slider with easing effects tutorial. 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 demo:
Live Demo
[sociallocker]
download in package
[/sociallocker]
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
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!