a2dCurousel

by Roman

HTML

<section>
    <div class="layout">
    <div class="a2dCarousel mv40" id="a2dCarousel1">
        <div class="leftArrow"></div>
        <div class="visiblePart">
            <div class="lineItems">
                <div class="item">
                    <a href="http://acat.autodealer.ru/images/fullscreen/autocatalog/v1.png" rel="prettyPhoto[gallery4]">
                        <img src="http://acat.autodealer.ru/images/fullscreen/autocatalog/v1.png" alt="Каталоги запчастей по маркам автомобилей">
                    </a>
                </div>
                <div class="item">
                    <a href="http://acat.autodealer.ru/images/fullscreen/autocatalog/v2.png" rel="prettyPhoto[gallery4]">
                        <img src="http://acat.autodealer.ru/images/fullscreen/autocatalog/v2.png" alt="Каталоги запчастей по моделям автомобилей">
                    </a>
                </div>
                <div class="item">
                    <a href="http://acat.autodealer.ru/images/fullscreen/autocatalog/v3.png" rel="prettyPhoto[gallery4]">
                        <img src="http://acat.autodealer.ru/images/fullscreen/autocatalog/v3.png" alt="Список агрегатов автомобиля">
                    </a>
                </div>
                <div class="item">
                    <a href="http://acat.autodealer.ru/images/fullscreen/autocatalog/v4.png" rel="prettyPhoto[gallery4]">
                        <img src="http://acat.autodealer.ru/images/fullscreen/autocatalog/v4.png" alt="Изображение автозапчастей с каталожными номерами">
                    </a>
                </div>
                <div class="item">
                    <a href="http://acat.autodealer.ru/images/fullscreen/autocatalog/v5.png" rel="prettyPhoto[gallery4]">
                        <img src="http://acat.autodealer.ru/images/fullscreen/autocatalog/v5.png" alt="Изображение автозапчастей с каталожными номерами">
                    </a>
                </div>
                <div class="item">
       ...

CSS

.layout{width:970px}
.mv40{margin-top:40px;margin-bottom:40px}
/**********************************************************************************************************************/
/***   Carousel from AutoDealer   *************************************************************************************/
/**********************************************************************************************************************/
.a2dCarousel{position:relative}
.a2dCarousel .leftArrow, .a2dCarousel .rightArrow{
    position: absolute;
    top: -10%;
    height: 120%;
    cursor: pointer;
    z-index: 10;
}
.a2dCarousel .leftArrow {
    left: 0;
    width: 25px;
    background: url('http://acat.autodealer.ru/img/prev.png') no-repeat 50%;
    box-shadow: 10px 0 10px -10px rgba(0,0,0,0.5);
}
.a2dCarousel .rightArrow{
    right: 0;
    width: 25px;
    background: url('http://acat.autodealer.ru/img/next.png') no-repeat 50%;
    box-shadow: -10px 0px 10px -10px rgba(0,0,0,0.5);
}
.a2dCarousel .leftArrow:hover,
.a2dCarousel .leftArrow.notActive,
.a2dCarousel .rightArrow:hover,
.a2dCarousel .rightArrow.notActive{opacity: 0.5;}
.a2dCarousel .leftArrow.notActive, .a2dCarousel .rightArrow.notActive{cursor:default;opacity:0.5;}

.a2dCarousel .leftArrow:hover,
.a2dCarousel .leftArrow.notActive{
    box-shadow: 10px 0 10px -10px rgba(0,0,0,1.0);
}
.a2dCarousel .rightArrow:hover,
.a2dCarousel .rightArrow.notActive{
    box-shadow: -10px 0px 10px -10px rgba(0,0,0,1.0);
}

.a2dCarousel .visiblePart{
    position: relative;
    width: 920px;
    height: 180px;
    margin: auto;
    overflow: hidden;
}
.a2dCarousel .lineItems{
    position: absolute;
    top: 0;
    left: 0;
    clear: both;
}
.a2dCarousel .item{
    position: relative;
    display: inline-block;
    width: 222px;
    height: 180px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;

    float: left;
    margin-left: 3px;
    margin-right: 3px;

    overflow: hidden;
}
.a2dCarousel .item a{
   ...

JavaScript

/* ----------------------------------------------------------------------
	Class     : a2dCarousel
	Author    : Troshkov Roman ([email protected])
    Copyright : AutoDealerRU (www.autodealer.ru)
	Version   : 0.0.2
------------------------------------------------------------------------- */

(function( $ ){
    var _opts = { /// Default Options
        'startPosition': 0
    };
    $.fn.a2dCarousel = function(opts){

        opts = $.extend(true, _opts, opts);

        $(this).mousedown(function(){return false});

        var arrowStyle = function(arrows,positionRL,maxLeft){
            console.log({
                'lineItemsW':lineItemsW,
                'visible':visible,
                'maxLeft':maxLeft,
                'positionRL':positionRL
            });
            if( positionRL==0 ){
                $(arrows.left).removeClass('active' ).addClass('notActive');
                $(arrows.right).removeClass('hover' ).addClass('active');
            }
            if( positionRL>0 && positionRL<maxLeft ){
                $(arrows.left).removeClass('notActive' ).addClass('active');
                $(arrows.right).removeClass('notActive' ).addClass('active');
            }
            if( positionRL>=maxLeft ){
                $(arrows.left).removeClass('notActive' ).addClass('active');
                $(arrows.right).removeClass('active' ).addClass('notActive');
            }
        };

        var $leftArrow    = $(this).find('.leftArrow')
            ,$rightArrow  = $(this).find('.rightArrow')
            ,arrows       = { left:$leftArrow, right:$rightArrow }
            ,$items       = $(this).find('.item')
            ,widthItem    = $($items[0]).outerWidth(true)
            ,countItems   = $items.length
            ,lineItemsW   = ( widthItem * countItems )
            ,visible      = $(this).find('.visiblePart').width()
            ,$lineItems   = $(this).find('.lineItems' ).css('width',lineItemsW)
            ,positionRL   = opts.startPosition
        ...