jQuery Plugin for Carousel

draft setup

by smaug333

HTML

<div class="main-container">
    <div class="main wrapper clearfix">
        <article>
            <section>
                <ul class="carousel">
                    <li>
                        <img src="http://placehold.it/300x80&text=placehold.it+rocks 1!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/300x80&text=placehold.it+rocks 2!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/300x80&text=placehold.it+rocks 3!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/300x80&text=placehold.it+rocks 4!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/300x80&text=placehold.it+rocks 5!" alt="">
                    </li>
                </ul>
                <br>
                <br>
            </section>
            <section>
                <ul class="carousel3">
                    <li>
                        <img src="http://placehold.it/240x150&text=placehold.it+rocks 1!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/240x150&text=placehold.it+rocks 2!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/240x150&text=placehold.it+rocks 3!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/240x150&text=placehold.it+rocks 3!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/240x150&text=placehold.it+rocks 3!" alt="">
                    </li>
                    <li>
                        <img src="http://placehold.it/240x150&text=placehold.it+rocks 3!" alt="">
                    </li>
                </ul>
                <br>
                <br>
    ...

CSS

.carousel__arrowback, .carousel__arrownext {
    color: White;
    font-size: 24px;
    position: absolute;
    vertical-align: middle;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    cursor: pointer;
    margin: 3px;
}
.carousel__arrownext {
    left: auto;
    right: 0;
    text-align: right;
}
.carousel__arrownext:after, .carousel__arrowback:before {
    content:'';
    display: inline-block;
    height: 100%;
    line-height: 100%;
    vertical-align: middle;
}

JavaScript

/*!
 * jQuery plugin - easyCarousel
 * a simple image slider exercise
 * author: smaug333
 * Licensed under the MIT license
 * this plugin is based on the  
 * jQuery lightweight plugin boilerplate
 * Original plugin boilerplate author: @ajpiano
 * Further changes, comments: @addyosmani
 */


;
(function ($, window, document, undefined) {

    var pluginName = "easyCarousel";
    
    // default configuration object
    defaults = {
        cssItem: {
            'width': 'auto',
            'height': 'auto',
            'display': 'block',
            'float': 'left',
            'overflow': 'hidden',
            'list-style': 'none',
            'margin': '0 10px 0 0'
        },
        cssStage: {
            'width': 'auto',
            'clear': 'both',
            'display': 'block',
            'position': 'relative',
            'top': '0',
            'left': '0',
            'float': 'left',
            'overflow': 'hidden',
            'padding': '0',
            'margin': '0'
        },
        cssTheatre: {
            'display': 'block',
            'position': 'relative',
            'overflow': 'hidden',
            'clear': 'both'
        }
    };

    // The actual plugin constructor
    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {

        init: function () {

            var options = this.options;
            this.options.stage = $(this.element);
            this.options.collection = $(this.options.stage).children();

            // inits list for carousel and extra markup like wrapper & navigation) 
            this.buildCollectionView(options, this.setDimensionsHelper);
            this.buildStageView(options, this.setDimensionsHelper);
            this.buildTheatreView(options, this.setDimensionsHelper);
           ...