divSlideShow - A jQuery plugin

While most slideshow plugins on the web are for <img> only, divSlideShow provides a more flexible slideshow for <div>, you can embed anything inside a <div> and make it a slideshow, such as images, text, flash... anything that you normally included in a webpage, with only one line of javascript call.

Download Source

Updates

1.2 
    - some core functions have been rewritten
    - slideshows can now be manipulated by custom controls (can be outside the slideshow) by using the function: $.divSlideShow.slideTo(slideShow, page)
        - slideShow: a DOM object or a jquery-style selector string, e.g. '#slideshow'
        - page: the target page, from 0 to (maxPage - 1)
1.1 
    - children no longer need to have the class "slide", all immediate children will become a slide (i.e. go down one level in the DOM tree)
    - removed all default css classes
    - renamed parameter: innerClass to slideContainerClass
    - added parameters: controlHoverClass, controlContainerClass	

Code Example:

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='jquery.divslideshow-1.1-min.js' type='text/javascript'></script>


<div class='slideshow'>
    <div class='slide'>slide1</div>
    <div class='slide'>slide2</div>
    <div class='slide'>slide3</div>
    <div class='slide'>slide4</div>
    <div class='slide'>slide5</div>
    <div class='slide'>slide6</div>
    <div class='slide'>slide7</div>
    <div class='slide'>slide8</div>
    </div>

<script>
    /* call divSlideShow without parameters */
    $('.slideshow').divSlideShow();

    /* call divSlideShow with parameters */
    //$('.slideshow').divSlideShow( {width:300, height:150, arrow:'split', controlClass:'custom'} );
</script>

Paremeters [default]:

width[200] - width of contents
height[100] - height of contents (exclude controls, which adds extra height below the contents)
arrow["begin"] - position of the left/right arrow ("begin" or "end" or "split")
loop[1] - number of loops of slideshow, set to 0 to disable slideshow
delay[5000] - time interval for slideshow, in milliseconds

leftArrowClass[""] - css class for left arrow
rightArrowClass[""] - css class for right arrow
slideContainerClass[""] - css class for contents container
controlClass[""] - css class for control buttons
controlActiveClass[""] - css class for active control buttons
controlHoverClass[""] - css class for mouse-hovered control buttons
controlContainerClass[""] - css class for the control button container
separatorClass[""] - css class for separator between contents and control buttons

Demo:

A css styled slideshow (check source file for css details)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique dapibus dui, ac tincidunt nibh fermentum faucibus. Mauris tincidunt metus eget diam consequat tempus. Vestibulum ac urna id diam dignissim faucibus ac molestie purus. Etiam eget turpis neque, nec gravida magna. Curabitur aliquet imperdiet lacinia. Curabitur blandit dictum sollicitudin. Etiam.
Maecenas sed lacinia lacus. Donec lorem urna, posuere nec feugiat eget, porttitor sit amet quam. Quisque vel sem urna, in tincidunt enim. Morbi eget risus eget nisi dictum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porta elementum suscipit. Ut sapien libero, pulvinar iaculis sodales vel, ultricies sed mauris. In varius, dolor egestas gravida mollis, nulla risus lacinia augue, ut porta erat diam et sem. Etiam velit turpis, tristique quis tincidunt eget, consequat eget urna. Praesent nulla dui, tincidunt ac commodo ut, venenatis sed sapien. Cras ultrices egestas quam, vitae suscipit mauris imperdiet scelerisque. Suspendisse varius bibendum quam, eu imperdiet nisl adipiscing at. Cras aliquet elementum massa nec lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra nisl id diam commodo auctor. Maecenas mi orci, malesuada nec ultrices vel, lacinia ut ante. Phasellus turpis lorem, ornare sit amet mattis ac, dapibus vitae quam. Donec lectus massa, vestibulum imperdiet hendrerit sed, dapibus eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis lorem in velit imperdiet dignissim. Duis sit amet mollis velit. Mauris vehicula orci eu metus mollis sit amet commodo lorem aliquam. Vivamus purus lacus, pretium porta euismod ac, auctor id dui. Fusce ultrices ipsum commodo lectus ultrices vel blandit sapien scelerisque. Nam placerat ante at erat sodales dignissim. In quis leo vel diam pellentesque varius at aliquam ipsum. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique dapibus dui, ac tincidunt nibh fermentum faucibus. Mauris tincidunt metus eget diam consequat tempus. Vestibulum ac urna id diam dignissim faucibus ac molestie purus. Etiam eget turpis neque, nec gravida magna. Curabitur aliquet imperdiet lacinia. Curabitur blandit dictum sollicitudin. Etiam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra nisl id diam commodo auctor. Maecenas mi orci, malesuada nec ultrices vel, lacinia ut ante. Phasellus turpis lorem, ornare sit amet mattis ac, dapibus vitae quam. Donec lectus massa, vestibulum imperdiet hendrerit sed, dapibus eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis lorem in velit imperdiet dignissim. Duis sit amet mollis velit. Mauris vehicula orci eu metus mollis sit amet commodo lorem aliquam. Vivamus purus lacus, pretium porta euismod ac, auctor id dui. Fusce ultrices ipsum commodo lectus ultrices vel blandit sapien scelerisque. Nam placerat ante at erat sodales dignissim. In quis leo vel diam pellentesque varius at aliquam ipsum. Nulla facilisi.
Maecenas sed lacinia lacus. Donec lorem urna, posuere nec feugiat eget, porttitor sit amet quam. Quisque vel sem urna, in tincidunt enim. Morbi eget risus eget nisi dictum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porta elementum suscipit. Ut sapien libero, pulvinar iaculis sodales vel, ultricies sed mauris. In varius, dolor egestas gravida mollis, nulla risus lacinia augue, ut porta erat diam et sem. Etiam velit turpis, tristique quis tincidunt eget, consequat eget urna. Praesent nulla dui, tincidunt ac commodo ut, venenatis sed sapien. Cras ultrices egestas quam, vitae suscipit mauris imperdiet scelerisque. Suspendisse varius bibendum quam, eu imperdiet nisl adipiscing at. Cras aliquet elementum massa nec lacinia.

Go to page:

Colored to distinguish each elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique dapibus dui, ac tincidunt nibh fermentum faucibus. Mauris tincidunt metus eget diam consequat tempus. Vestibulum ac urna id diam dignissim faucibus ac molestie purus. Etiam eget turpis neque, nec gravida magna. Curabitur aliquet imperdiet lacinia. Curabitur blandit dictum sollicitudin. Etiam.
Maecenas sed lacinia lacus. Donec lorem urna, posuere nec feugiat eget, porttitor sit amet quam. Quisque vel sem urna, in tincidunt enim. Morbi eget risus eget nisi dictum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porta elementum suscipit. Ut sapien libero, pulvinar iaculis sodales vel, ultricies sed mauris. In varius, dolor egestas gravida mollis, nulla risus lacinia augue, ut porta erat diam et sem. Etiam velit turpis, tristique quis tincidunt eget, consequat eget urna. Praesent nulla dui, tincidunt ac commodo ut, venenatis sed sapien. Cras ultrices egestas quam, vitae suscipit mauris imperdiet scelerisque. Suspendisse varius bibendum quam, eu imperdiet nisl adipiscing at. Cras aliquet elementum massa nec lacinia.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra nisl id diam commodo auctor. Maecenas mi orci, malesuada nec ultrices vel, lacinia ut ante. Phasellus turpis lorem, ornare sit amet mattis ac, dapibus vitae quam. Donec lectus massa, vestibulum imperdiet hendrerit sed, dapibus eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis lorem in velit imperdiet dignissim. Duis sit amet mollis velit. Mauris vehicula orci eu metus mollis sit amet commodo lorem aliquam. Vivamus purus lacus, pretium porta euismod ac, auctor id dui. Fusce ultrices ipsum commodo lectus ultrices vel blandit sapien scelerisque. Nam placerat ante at erat sodales dignissim. In quis leo vel diam pellentesque varius at aliquam ipsum. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique dapibus dui, ac tincidunt nibh fermentum faucibus. Mauris tincidunt metus eget diam consequat tempus. Vestibulum ac urna id diam dignissim faucibus ac molestie purus. Etiam eget turpis neque, nec gravida magna. Curabitur aliquet imperdiet lacinia. Curabitur blandit dictum sollicitudin. Etiam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra nisl id diam commodo auctor. Maecenas mi orci, malesuada nec ultrices vel, lacinia ut ante. Phasellus turpis lorem, ornare sit amet mattis ac, dapibus vitae quam. Donec lectus massa, vestibulum imperdiet hendrerit sed, dapibus eu lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer quis lorem in velit imperdiet dignissim. Duis sit amet mollis velit. Mauris vehicula orci eu metus mollis sit amet commodo lorem aliquam. Vivamus purus lacus, pretium porta euismod ac, auctor id dui. Fusce ultrices ipsum commodo lectus ultrices vel blandit sapien scelerisque. Nam placerat ante at erat sodales dignissim. In quis leo vel diam pellentesque varius at aliquam ipsum. Nulla facilisi.
Maecenas sed lacinia lacus. Donec lorem urna, posuere nec feugiat eget, porttitor sit amet quam. Quisque vel sem urna, in tincidunt enim. Morbi eget risus eget nisi dictum posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis porta elementum suscipit. Ut sapien libero, pulvinar iaculis sodales vel, ultricies sed mauris. In varius, dolor egestas gravida mollis, nulla risus lacinia augue, ut porta erat diam et sem. Etiam velit turpis, tristique quis tincidunt eget, consequat eget urna. Praesent nulla dui, tincidunt ac commodo ut, venenatis sed sapien. Cras ultrices egestas quam, vitae suscipit mauris imperdiet scelerisque. Suspendisse varius bibendum quam, eu imperdiet nisl adipiscing at. Cras aliquet elementum massa nec lacinia.

Download Source