Stupid Simple Carousel

by zerrax

HTML

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <ol class="carousel">
        <li><a href="#">Slide 1</a></li>
        <li><a href="#">Slide 2</a></li>
        <li><a href="#">Slide 3</a></li>
        <li><a href="#">Slide 4</a></li>
        <li><a href="#">Slide 5</a></li>
        <li><a href="#">Slide 6</a></li>
    </ol>

CSS

/* Hard Reset - Only for demo purpose! */
* {
    margin: 0; 
    padding: 0;
    list-style: none;
}

a img {border: none;}

body {
    font: 16px/1.4 sans-serif;
    color:#333;
    background: #EEE;
}

.carousel    {
    position: relative;
    width:100%;
  //  overflow: hidden;
    margin: 20px
}

.carousel-wrapper {position: static;}

.carousel > li {
width: 30%;
    float:left;
    text-align: center;
    border: 2px solid #FFF;
    background: #DDD;
      border-radius: 3px;
  font-size: 14px;
  height:200px;
  position:relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image:url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg);
      background-size: 100% 100%;
  -webkit-transition: transform 0.5s; /* Safari */
  transition: transform 0.5s;
}
.carousel > li:hover {
  z-index: 1;
  width: 25%;
  height:450px;
  -webkit-transform: translateZ(0) scale(1.2,2);
transform: translateZ(0) scale(1.2,2);
bottom:-35px;
}

.carousel-nav {
    display:block;
    position: absolute;
    z-index:200;
    top:50px;
    background: #FFF;
    padding:10px 0;
    width: 70px;
    text-align: center;
    font-size:12px;
    border: 1px solid #DDD;
    text-decoration: none;
}

.carousel-prev {
    left: -72px;
}

.carousel-prev-disabled,
.carousel-next-disabled    {
    color: #CCC;
    cursor: not-allowed;
}

.carousel-next {
    right: -72px;
}

JavaScript

/*---------------------------------------------------
    Default CSS classes:
        - carousel-wrapper
        - carousel-nav
        - carousel-prev
        - carousel-next
---------------------------------------------------*/

(function($) {

    $.fn.simpleCarousel = function(options) {

        return this.each(function() {
            
            var $carousel = $(this),        
                prevText = 'Previous',
                nextText = 'Next';
            
            var    $items = $carousel.children(), // li's collection
                $itemsWidth = null,
                $initWidth = $carousel.width(); //initial width for clipping usage
            
            
            // Calculate all list items width and set that value to parent's width (ol/ul)
            $items.each(function() {
                $itemsWidth += $(this).outerWidth();
            });
            $carousel.css({'width' : $itemsWidth});
            
            
            // Create carousel wrapper and use it as clipping mask
            var $clip = $('<div class="carousel-wrapper" />').css({'width' : $initWidth, 'height' : $items.height(), 'overflow' : 'hidden'});
            $carousel.wrap($clip);
            
            
            // Create navigation (next/previous link)
            var $prev = $('<a href="#" class="carousel-nav carousel-prev">' + prevText + '</a>');
            var $next = $('<a href="#" class="carousel-nav carousel-next">' + nextText + '</a>');
            $carousel.parent().prepend($prev, $next);
            
            function nextEnd() {
                return  (Math.abs( parseInt( $carousel.css('left') ) ) + $initWidth) >= $itemsWidth;
            }
            
            $next.click(function(e) {
                if ($carousel.is(':animated')) {
                    return false;
                }
                if ( !nextEnd() ) {
                    $carousel.animate({left : '-=' + $items.first().outerWidth() + 'px'}, 'fast',...