CODEWITHSUNDEEP
javascriptjquery
user3192937
user3192937

Reputation: 35

Change query slider first Slide as Default slide

Demo 01

In Demo 01 when I click #one, the first slide appears. But I need, the first slide already in the page, before click #one. the first slide must be the default slide of the slider.

How to change this code?

Can u help with this.

$(function () {

    // get the width of the first content box
    // add a bit of extra so we end up with "-350px"
    var contentWidth = '-' + ($('.content').width() + 50) + 'px';

    // reposition the content here in case javascript is disabled
    $('.content').css({
        position: 'absolute',
        left: contentWidth
    });

    $("li a").click(function () {
        event.preventDefault();
        var $blockID = $( $(this).attr('href') );
        // if the content is already showing, don't do anything
        if ($blockID.hasClass('visible')) { return; }
        // hide any visible content
        $('.content.visible')
            .removeClass('visible')
            // move the old content past the current window width, then reset it's position
            .animate({
                left: '-' + $(window).width()
            }, function () {
                // Remove left setting after the animation completes
                $(this).css('left', contentWidth);
            });
        $blockID
            .addClass('visible')
            .animate({ left: 0 });
    });

});

Upvotes: 2

Views: 47

Answers (1)

zzlalani
zzlalani

Reputation: 24374

Try this

$("li a:first").trigger("click");

after the click event

http://jsfiddle.net/fQs8N/3/

Or if you want to avoid animation for first appearance try this

$('.content:first').css('left', '0px');

before click or anywhere

http://jsfiddle.net/fQs8N/4/

Upvotes: 1

Related Questions