CODEWITHSUNDEEP
jqueryslideshow
Yasitha
Yasitha

Reputation: 911

Horizontal sliding menu type image slider

enter image description here

Can some one help me to this? i want to create this type of image slider for my web site. but the thing is i have seen some menus like this but no slides.

please give me some guide to make a slide like this.

thank you my friends.

I'm not a genius in jquery.. so i just try to do some things but didn't work.. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;

}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
</style>
<script src="jquery-1.10.2.js"></script>
<script>

    function slideSwitch() {

    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
        $active.addClass('last-active');

        $next.css({width: 0})
        .addClass('active')
        .animate({width: 376}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});


</script>

</head>

<body>
<div id="slideshow">

       <img src="images(1).jpg" alt="" height="134" class="active">
        <img src="images.jpg" alt="" height="134">
        <img src="3.jpg" alt="" height="134">
        <img src="4.jpg" alt="" height="134">
        <img src="5.jpg" alt="" height="134">
        <img src="6.jpg" alt="" height="134">

    </div>
</body>
</html>

Upvotes: 0

Views: 803

Answers (1)

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

Use the following html for your slides

<div id="one">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/1.jpg" alt="image" />
                            <figcaption class="ap-caption">Slide One</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/2.jpg" alt="image" />
                            <figcaption class="ap-caption">Slide Two</figcaption>
                        </figure>
                    </div>
                </li>
    </ol>
</div>

JS

$('#one').liteAccordion({
                        onTriggerSlide : function() {
                            this.find('figcaption').fadeOut();
                        },
                        onSlideAnimComplete : function() {
                            this.find('figcaption').fadeIn();
                        },
                        autoPlay : true,
                        pauseOnHover : true,
                        theme : 'stitch',
                        rounded : true,
                        enumerateSlides : true
                }).find('figcaption:first').show();

Check JS fiddle http://jsfiddle.net/raunakkathuria/7rK6c/

You can check more documentation http://nicolahibbert.com/demo/liteAccordion/

Upvotes: 1

Related Questions