Carousel

by Elijah Tate

HTML

<div class="page">
    <div class="carousel-outer">
        <div class="left-transparent"></div>
        <div class="carousel-inner"> <a class="left-link" href="#">
                <img src="http://i909.photobucket.com/albums/ac298/roboyak/leftLink_zpstefx6jvg.png" />
            </a>

            <div class="wrapper">
                <img class="carousel-item" src="http://i909.photobucket.com/albums/ac298/roboyak/Logo4_zpsutbabxur.jpg" alt="" />
                <img class="carousel-item" src="http://i909.photobucket.com/albums/ac298/roboyak/Logo3_zps56cbc9cb.jpg" alt="" />
                <img class="carousel-item" src="http://i909.photobucket.com/albums/ac298/roboyak/Logo1_zpssbhwnhjn.jpg" alt="" />
                <img class="carousel-item" src="http://i909.photobucket.com/albums/ac298/roboyak/Logo2_zpsad04mks1.jpg" alt="" />
            </div> <a class="right-link" href="#">
                <img src="http://i909.photobucket.com/albums/ac298/roboyak/rightLink_zps3tr4uvuu.png" />
            </a>

            <ul class="scroll-buttons">
                <li class="scroll-button">1</li>
                <li class="scroll-button">2</li>
                <li class="scroll-button">3</li>
                <li class="scroll-button">4</li>
            </ul>
        </div>
        <div class="right-transparent"></div>
    </div>
</div>

CSS

.page {
    width: 960px;
    margin: 0 auto;
}
.carousel-outer {
    width: 100%;
    position: relative;
}
.left-transparent, .right-transparent, .carousel-inner {
    float: left;
}
.left-transparent, .right-transparent {
    width: 20%;
    position: absolute;
    opacity: 0.4;
    background-color: black;
}
.left-transparent {
    left: 0px;
    height: 200px;
    z-index: 50;
}
.right-transparent {
    right: 0px;
    height: 200px;
    z-index: 50;
}
.left-link {
    position: absolute;
    left: 0px;
    z-index: 100;
}
.right-link {
    position: absolute;
    right: 0px;
    z-index: 100;
}
.wrapper {
    position: absolute;
    width: 2898px;
}
.wrapper .carousel-item {
    float:left;
    width: 500px;
}
.carousel-inner {
    overflow: visible;
    height: 970px;
    margin-left: 20%;
}
.carousel-outer {
    overflow: hidden;
}
.scroll-buttons {
    position: absolute;
    bottom: 0px;
    margin: 0 10px;
    list-style: none;
    b
}
.scroll-buttons .scroll-button {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    text-align: center;
    margin: 0 10px;
}
.scroll-buttons .scroll-button:hover {
    cursor: pointer;
    background-color: black;
    color: white;
}
.activeLink {
    background-color: white;
}

JavaScript

/** it seems that the width and height of the images may end up being stretched */

(function ($) {

    var defaults = {
        waitTime: 400,

    }

    function lsAdvancedSlider(element, setting) {
        this.options = {};
        this.element = element;

        $.extend(this.options, defaults, setting);

        this.autoSlide = this.options.autoSlide;
        this.carouselInner = $(this.options.carouselInner);
        this.wrapper = $(this.options.wrapper);
        this.leftTransparentElement = $(this.options.leftTransparentElement);
        this.rightTransparentElement = $(this.options.rightTransparentElement);
        this.carouselItem = this.options.carouselItem;
        this.transparentWidth = this.rightTansparentElement.width();
        this.customHeight = this.options.customHeight;
        this.singleImageWidth = this.carouselOuter.width() - (this.leftTransparentElement.width() + this.rightTransparentElement.width());
        this.leftLink = $(this.options.leftLink);
        this.rightLink = $(this.options.rightLink);
        this.scrollButtonsContainer = $(this.options.scrollButtonsContainer);
        this.scrollButtonsClass = this.options.scrollButtonsClass;
        this.init();
    }
    
    lsAdvancedSlider.prototype.init = function(){
    	var parent = this,
            numberOfImages = $(parent.carouselItem).length;
        
        
        
    }

    $.fn.advancedCarousel = function (setting) {
        var $this = this;

        new lsAdvancedSlider($this, setting);

        return $this;
    }
})(jQuery);

(function ($) {
    $(document).ready(function () {
        $(".carousel-outer").advancedCarousel({
            waitTime: 2000,
            carouselInner: ".carousel-inner",
            wrapper: ".wrapper",
            leftTransparentElement: ".left-transparent",
            rightTransparentElement: ".right-transparent",
            carouselItem: "carousel-item",
            customHeight: 400,
            leftLink: ".left-link",
     ...