jCarousel fraction configuation

Using jcarousel with fraction configuration

by kuyabiye

HTML

<script src="http://dl.dropbox.com/u/6696146/cdn/jcarousel/jquery.jcarousel.min.js"></script>
<div id="name-carousel" class="container">  
    <ul id="mycarousel" class="jcarousel-skin-tango"> 
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li> 
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li> 
    </ul> 
</div>

CSS

.jcarousel-skin-tango .jcarousel-container {
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

/* horizontal */
.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 175px; /* 3 elements * 75px, 2 margins * 10px. narrow 70px double of negative margin of clip */
    overflow: hidden; /* remove overflow hidden from clip */
    padding: 20px 10px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    margin: 0 0 0 -35px; /* pull 35px */
    width:  245px; /* clip lenght is 245 = (75*3) + 2*10 */
    height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

/* vertical */
.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}


.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}



.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100px;
    cursor: pointer;
    background: transparent url(http://dl.dropbox.com/u/6696146/cdn/next.png) no-repeat 0 -10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://dl.dropbox.com/u/6696146/cdn/prev.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: 0 -9px;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
   ...

JavaScript

$(document).ready(function() {

    $('#mycarousel').jcarousel({
        wrap: 'circular',
        auto: 2,
        scroll: 1,
        initCallback: function(carousel, state) {
            if (state == 'init') {
                carousel.clip.hover(function() {
                    carousel.stopAuto();
                }, function() {
                    carousel.startAuto();
                });

            }
        }
    });
});