Skip to content Skip to sidebar Skip to footer
Home / Javascript / Jquery / Slideshow

How To Make A Slideshow In Javascript

Post a Comment
Im trying to make a slideshow with these images: Whenever I try this, it gets stuck on first image.

Solution 1:

Use cycle.js http://jquery.malsup.com/cycle/

$('#slideshow').cycle();

Solution 2: 

<html>
<head>

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>

<script>
$(document).ready(function(){

    // This initialises carousels on the container elements specified, in this case, carousel1.
    $("#carousel1").CloudCarousel(      
        {           
            xPos: 128,
            yPos: 32,
            buttonLeft: $("#left-but"),
            buttonRight: $("#right-but"),
            altBox: $("#alt-text"),
            titleBox: $("#title-text")
        }
    );
});

</script>

</head>
    <body>
        <!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:1000px; height:700px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="images/Chrysanthemum.jpg" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="images/Desert.jpg" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="images/Hydrangeas.jpg" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="images/Koala.jpg" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>

        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />

        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>
</html>

Solution 3:

There are many fancy light weight image slideshow plugins available in Jquery. Check
http://wowslider.com/rq/jquery-images-slider/
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html


You may like these posts

Post a Comment for "How To Make A Slideshow In Javascript"