Demo Carousel

This is an example of horizontal Carousel usage. Build your HTML Carousel with : - Frame with overflow hidden - Content division (its width will be changed by js) - Carousel Items floating left inside

by Koubenec

HTML

<script src="https://raw.github.com/Nutellove/mootools-cloud/master/Gallery/Carousel.js"></script>
<a id="prev" class="button" href="javascript:void(0)">&lt;</a>

<div id="carousel">
    
    <ul id="carouselContent">
        <div class="contentdiv">
        <p>1.</p>
        </div>
        <li>2.textt</li>
        <li>3.</li>
        <li>4.</li>
        <li>5.</li>
        <li>6.</li>
        <li>7.</li>
        <li>8.</li>
        <li>9.</li>
        <li>10.</li>
        <li>11.</li>
        <li>12.</li>
        <li>13.</li>
        <li>14.</li>
        <li>15.</li>
        <li>16.</li>
    </ul>
    
</div>

<a id="next" class="button" href="javascript:void(0)">&gt;</a>

<div id="counter">
    <span id="counterCurrent">0</span>
    /
    <span id="counterTotal">0</span>
</div>

<p id="lastPageMsg">Achievement unlocked : Last Page Explorer !</p>

CSS

a.button {
    display: block;
    float:   left;
    width:   40px;
    height:  60px;
    padding-top: 22px;
    margin:  0 5px;
    position: relative;
    
    background: #000;
    color:      #fff;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
}

a.button.disabled {
    background: #999;
}

a.button:hover {
    font-weight: bold;
}

#carousel {
    float:    left;
    overflow: hidden;
    width:    500px;
    height:   300px;
    border:   1px solid black;
}

#carouselContent {
}

#carouselContent li {
    width:  30px;
    height: 30px;
    margin: 5px;
    
    background: #f39;
    font-size: 24px;
    text-align: center;
}


#counter {
    clear: both;
    padding-top: 10px;
    width: 0px;
    text-align: center;
}

#lastPageMsg {
    display: none;
}

.contentdiv {
    display-type: li;
    width: 500px;
    height: 300px;
    }

JavaScript

// This carousel uses existing HTML, it does not create Elements.

var carousel = new Carousel('carousel',{
    prevButton: 'prev',
    nextButton: 'next',
    counterCurrent: 'counterCurrent',
    counterTotal:   'counterTotal',
    nbOfColsPerPage: 1,
    nbOfRowsPerPage: 1,
    onLast: function(){
        $('lastPageMsg').setStyle('display', 'block');
    }
});