content carousel

by ecartdk

HTML

<script src="https://raw.github.com/Wilto/Dynamic-Carousel/master/plugin.js"></script>
    <div class="slidewrap" data-autorotate="5000">
        <ul class="slidecontrols">
            <li><a href="#sliderName" class="next">Next</a></li>
            <li><a href="#sliderName" class="prev">Prev</a></li>
        </ul>
        <ul class="slider" id="sliderName">
            <li class="slide">    
                <h2 class="slidehed">First Slide</h2>
                <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero.</p>
            </li>
            <li class="slide">    
                <h2 class="slidehed"><a href="#">Second Slide</a></h2>
                <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</p>
            </li>
            <li class="slide">    
                <h2 class="slidehed">Third Slide</h2>
                <p>Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget.</p>
            </li>
            <li class="slide">    
                <h2 class="slidehed"><a href="#">Fourth Slide</a></h2>
                <p>In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin...

CSS

body { padding-bottom: 5em; }
            ul { margin: 0; padding: 0; list-style: none; }

            .carousel-tabs { clear: both; }
            .carousel-active-tab { color: red; }    
            .carousel-disabled,
            .mr-rotato-disabled { color: #aaa; }

            .slidewrap2 .carousel-tabs {
                padding: 0;
                margin: 1em 0;
                clear: both;
            }
            .slidewrap2 .carousel-tabs li {
                display: inline-block; 
                padding: 0 2px;
            }
            .slidewrap2 .carousel-tabs a {
                background: #ddd;
                display: inline-block;
                height: 10px;
                text-indent: -9999px;
                width: 10px;
                border-radius: 5px;
            }
            .ie .slidewrap2 .carousel-tabs li,
            .ie .slidewrap2 .carousel-tabs a { 
                display: block;
                float: left;
            }
            .slidewrap2 .carousel-tabs .carousel-active-tab a {
                background: #777;
            }

            .events {
                font: normal 11px/1.4 arial, helvetica, sans-serif;
            }

JavaScript

$(document).ready(function() {
            $('.slidewrap').carousel({
                slider: '.slider',
                slide: '.slide',
                slideHed: '.slidehed',
                nextSlide : '.next',
                prevSlide : '.prev',
                addPagination: true,
                addNav : false
            });

            $('.slidewrap2').carousel({
                slider: '.slider',
                slide: '.slide',
                addNav: false,
                addPagination: true,
                speed: 300 // ms.
            });

            $('.slidewrap3').carousel({ 
                    namespace: "mr-rotato" // Defaults to “carousel”.
                })
                .bind({
                    'mr-rotato-beforemove' : function() {
                        $('.events').append("<li>“beforemove” event fired.</li>");
                    },
                    'mr-rotato-aftermove' : function() {
                        $('.events').append("<li>“aftermove” event fired.</li>");
                    }
                })
                .after('<ul class="events">Events</ul>');
        });