Grow your CSS skills. Land your dream job.

Jquery fading image slideshow – 2 on same page

  • # October 25, 2012 at 7:18 pm

    Hi guys

    I want to include two different jquery image faders on the same page on my site. Any suggestions/advice on how I could do this?

    Many thanks

    Adam

    JDS
    # November 1, 2012 at 2:44 am

    You using jquery cycle with the “fade” effect? Wouldn’t be a problem at all. You’ll have two different javascripts to call each div you want to fade..

    # November 1, 2012 at 3:40 am

    Here’s a simple item rotator plugin: http://jsfiddle.net/xAQGn/34/

    (function($) {
    $.fn.rotator = function(settings) {
    settings = $.extend({
    interval: 3000,
    speed: 1000
    }, settings);

    return this.each(function() {
    var $t = $(this),
    $item = $t.children().addClass('item').hide();

    $t.addClass('rotator');

    if ($item.length > 1) {
    $item.first().addClass('current').fadeIn(settings.speed);
    setInterval(function() {
    var c = $t.find('.current');
    if (c.next().length === 0) {
    c.removeClass('current').fadeOut(settings.speed);
    $item.first().addClass('current').fadeIn(settings.speed);
    } else {
    c.removeClass('current').fadeOut(settings.speed).next().addClass('current').fadeIn(settings.speed);
    }
    }, settings.interval);
    }
    });
    };
    })(jQuery);
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".