Creating a Rotating Slider with Easing Effects in jQuery

Creating a Rotating Slider with Easing Effects in jQuery

0 45555
Creating rotate slider with easing effects

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!

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply