A Jquery rotator that doesn't suck?

Question

I've been looking all over the place for a simple jquery rotator that has next/prev buttons, that will automatically fade through 5 or so images... so far everything is over complicated and not at all what I want or its so simple that it doesn't have any functionality other than switching between images...

so basically I'm asking if anyone knows of a Jquery image rotator that doesn't completely suck... lol

btw these are the things I would want it to do

1. rotate through images automatically
2. fade
3. have next and prev buttons

thanks

Answer 1

Easy Slider, its easy and awesome!

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

and demos here:

http://cssglobe.com/lab/easyslider1.7/01.html http://cssglobe.com/lab/easyslider1.7/02.html http://cssglobe.com/lab/easyslider1.7/03.html

Answer 2

Why aren't plugins at jQuery website are enough for you. This has all you need http://plugins.jquery.com/plugin-tags/image-rotator

here are demos: http://wowslider.com/jquery-slider-pinboard-fly-demo.html

Answer 3

Build your own. It's a fairly simple script.
Something like this might get you started:

html:

<div class="rotator">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</div>
<a id="rotator-prev" href="#">Previous</a> 
<a id="rotator-next" href="#">Next</a>

javascript:

$(document).ready(function() {
    var allImgs = $('.rotator img');

    allImgs.css({
        position: 'absolute',
        top: 0,
        left: 0
    }).hide();

    var currIdx = 0;
    allImgs.first().show();

    function next() {
        var nextIdx = currIdx + 1;
        if (nextIdx >= allImgs.length) nextIdx = 0;
        allImgs.eq(currIdx).fadeOut();
        allImgs.eq(nextIdx).fadeIn();
        currIdx = nextIdx;
    }

    function prev() {
        var prevIdx = currIdx - 1;
        if (prevIdx < 0) prevIdx = allImgs.length - 1;
        allImgs.eq(currIdx).fadeOut();
        allImgs.eq(prevIdx).fadeIn();
        currIdx = prevIdx;
    }

    function doAuto() {
        next();
        setTimeout(doAuto, 5000);
    }
    setTimeout(doAuto, 5000);

    $('#rotator-prev').click(function(evt) {
        evt.preventDefault();
        prev();
    });
    $('#rotator-next').click(function(evt) {
        evt.preventDefault();
        next();
    });
});

---

you can see this code with real images (and a few css tweaks) running at jsFiddle: http://jsfiddle.net/SXcNy/.

Answer 4

Try jCarousel

http://sorgalla.com/jcarousel/

Answer 5

Best one I had found to date is Orbit from the Zurb crew. It recently got assimilated into their Foundation framework, but you can still download the standalone plugin here

The code is VERY lightweight and aside from offering intuitive controls it has a nifty timer integrated with the play/pause button. By far the best choice in terms of a free solution.

If you are looking to pay for something with more whistles/bells and fancy pro transitions, you should check out WOW Slider or TN3 Gallery

Answer 6

I had the same problem as you, I wanted a simple image/content slideshow plugin but could only find ones with loads of features and skins etc that I didn't need. So I made Basic jQuery Slider - just so I had a simple plugin I could extend as I needed, rather than using a full featured one and removing features that I didn't need. If you decide to give it a try and have any problems, please let me know and I'll do what I can to help.