jQuerySuperSimpleCarousel

A very basic carousel for jQuery and jQuery Mobile that allows virtually any tag usage. See https://github.com/clayzermk1/jQuerySuperSimpleCarousel for more info/documentation.

HTML

<script src="https://github.com/clayzermk1/jQuerySuperSimpleCarousel/raw/master/dist/jQuerySuperSimpleCarousel.min.js"></script>
<div id="one" class="carousel">
    <button class="carousel-prev">Prev</button>
    <div class="carousel-deck">
        <div class="carousel-slide">Slide 1 on carousel 1, defaults (div)</div>
        <span class="carousel-slide">Slide 2 on carousel 1, defaults (span)</span>
        <a class="carousel-slide" href="http://www.google.com">Slide 3 on carousel 1, defaults (anchor, goes to google.com)</a>
        <img class="carousel-slide" src="http://farm3.staticflickr.com/2722/4284239882_3af6513498_t.jpg" alt="Slide 4 on carousel 1, defaults (img, picture of a toy t-rex by http://www.flickr.com/photos/stuben/)" />
        <div class="carousel-slide">
            <img src="http://farm6.staticflickr.com/5015/5505775854_39d4e3a1fe_t.jpg" alt="picture of a cat" />
            <p>Slide 5 on carousel 1, defaults (div with contents). The cat photo is owned by <a href="http://www.flickr.com/people/cubagallery/">CubaGallery</a> on Flickr.com.</p>
        </div>
        <form class="carousel-slide">
            <span>Slide 6 on carousel 1, defaults (div with form contents).</span><br />
            <label for="firstName">First Name:</label>
            <input type="text" name="firstName" /><br />
            <label for="lastName">Last Name:</label>
            <input type="text" name="lastName" /><br />
            <input type="Submit" value="Submit" />
        </form>
    </div>
    <button class="carousel-next">Next</button>
</div>

<div id="two" class="carousel">
    <button class="carousel-prev">Prev</button>
    <div class="carousel-deck">
        <div class="carousel-slide">Slide 1 on carousel 2, nav buttons may hide but they must always occupy space in the layout</div>
        <div class="carousel-slide">Slide 2 on carousel 2, nav buttons may hide but they must always occupy space in the layout</div>
        <div class="carousel-slide">Slide...

CSS

.carousel {
    border: 1px solid gold;
}

.carousel-deck {
    height: 300px;
    width: 300px;
    border: 1px solid silver;
}

.carousel-slide {
    border: 1px solid black;
}

.carousel-prev {
    border: 1px solid blue;
}

.carousel-next {
    border: 1px solid red;
}

JavaScript

$('#one').carousel();
$('#two').carousel({
    navButtonsAlwaysVisible: false,
    navButtonsAlwaysOccupySpace: true
});
$('#three').carousel({
    navButtonsAlwaysVisible: false,
    navButtonsAlwaysOccupySpace: false,
    startingSlide: 2
});

$(document).on('click', '#fcn-next', function(event) {
    $('#three').carousel('next');
});