What's the best method to load html/texts inside a sliding div?

Question

Here's what I'm trying to do. I want to create a sort of slide show effect on the main content. If the user click on the right or left arrow on this div, it will move forward/backward to the next "slide/text". The content inside this div or slide includes image, texts, hyperlinks, and can be styled by CSS. My question is, what's the best route to create this effect? I do not want to use flash. I am thinking of a combination of HTML5, CSS3, and jQuery and/or javascript. Does anyone have or know of examples similar to what I've described? Your suggestions or opinions are much appreciated.

Answer 1

There is lot of slide show scripts available, you can also try this

            <div class="mosaic-slide" style="z-index: 10;">

                <!-- The mosaic-slide div and the tiles are generated by jQuery -->
                <div class="tile" style="..."></div>
                <div class="tile" style="..."></div>
                <div class="tile" style="..."></div>
                <div class="tile" style="..."></div>

            </div>
        </div>

css:

        #mosaic-slideshow{
            /* The slideshow container div */
            height:500px;
            margin:0 auto;
            position:relative;
            width:670px;
        }

        .mosaic-slide{
            /* This class is shared between all the slides */
            left:80px;
            position:absolute;
            top:25px;

            border:10px solid #555;

            /* CSS3 rounded corners */
            -moz-border-radius:20px;
            -webkit-border-radius:20px;
            border-radius:20px;
        }

        .tile{
            /* The individual tiles */
            height:60px;
            width:60px;
            float:left;
            border:1px solid #555;
            border-width:0 1px 1px 0;
            background-color:#555;
        }

Demo: http://demo.tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/demo.html