ContinousCarousel

Circular slides carousel

by Bernat Comerma

HTML

<div id="container">
    <div class="arrow"><a href="#" class="prevSlide">Prev</a>
    </div>
    <div id="carousel" style="float:left">
        <ul>
            <li style="width:130px">
                <h3>1</h3>
            </li>
            <li style="width:340px">
                <h3>2</h3>
            </li>
            <li style="width:260px">
                <h3>3</h3>
            </li>
            <li style="width:200px">
                <h3>4</h3>
            </li>
            <li style="width:380px">
                <h3>5</h3>
            </li>
        </ul>
    </div>
    <div class="arrow"><a href="#" class="nextSlide">Next</a>
    </div>
</div>

CSS

#container {
    clear:both;
    float:left;
    width:940px;
}
#container .arrow {
    float:left;
    margin:10px;
    line-height:230px;
    font-size:large;
    font-weight:bold;
}
#carousel {
    width: 350px;
    overflow:hidden;
    height:252px;
    border:1px solid black;
}
#carousel ul {
    width: 999999px;
    padding: 0;
    margin: 0;
}
#carousel ul li {
    width:239px;
    text-align: center;
    height: 250px;
    list-style: none;
    float: left;
    line-height:228px;
    border:1px solid red;
}

JavaScript

var oCarousel = '';
$(function () {
    var _settings = {
        divContainer: "#carousel",
        btPrevSlide: ".prevSlide",
        btNextSlide: ".nextSlide",
        direction: 0,
        endReachedFunc: function () {
            console.log('end reached')
        }
    };
    oCarousel = new ContinuousCarouselV2(_settings, 1);
});

var ContinuousCarouselV2 = function (pSettings, pAutoRun) {
    this.hInterval = 0;
    this.numItems = 0;
    this.ctItems = 0;
    this.DIR = {
        RtoL: 0,
        LtoR: 1,
        STOP: 2
    };
    this.iniDirection = 0;
    this.iniStep = 0;
    this.currDirection = 0;
    this.$ulContainer = '';
    this.currItemWidth = 0;
    this.currPos = 0;
    this.settings = {
        // jQuery selectors
        divContainer: '', // Required. jQuery Div ID. With overflow:hidden. e.g.: #carousel
        ulContainer: '', // Optional
        btPrevSlide: '',
        btNextSlide: '',
        //
        endReachedFunc: '', // Function to invoke when all items are slid to one side
        direction: 0, // 0: right to left | 1: left to right | 2: No automatic sliding
        step: 1,
        interval: 30,
        fastStep: 3,
        fastInterval: 5
    };
    this.options = {};
    this.init = function (pSettings, pAutoRun) {
        var _me = this,
            _opts = _me.options = (pSettings) ? $.extend({}, _me.settings, pSettings) : $.extend({}, _me.settings);
        if (!_opts.ulContainer) {
            _opts.ulContainer = _opts.divContainer + " ul";
        }
        _me.currSpeed = _opts.speed;
        _me.currDirection = _me.iniDirection = _opts.direction;
        _me.iniStep = _opts.step;
        _me.$ulContainer = $(_opts.ulContainer).css({
            'width': 999999,
            'position': 'relative'
        });
        _me.bindEvents();
        if (_opts.endReachedFunc) {
            _me.computeNumItems()
        }
        if (pAutoRun) {
            _me.run()
        }
    };
    this.bindEvents = function () {
       ...