CarouFredSel Separator

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<div class="carouFredSelWrapper">
    <ul id="carouFredSel">
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
                <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2010"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a href="#" rel="external"><img src="http://lorempixum.com/75/75" /></a></li>
        <li rel="2011"><a...

CSS

* {
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

h1 {
    color: #8cabbf;
    font: 700 14px/14px Arial;
    margin-bottom: 20px;
    text-align: center;
}

.carouFredSelWrapper {
background: #3D3D3D;
border: 1px solid #A3A3A3;
margin: 0 auto;
padding: 40px;
position: relative;

     overflow: hidden;
}


#carouFredSel li {
    display: block;
   
    float: left;
    height: 100px;
    text-align: center;
    width: 100px;
   
}
#carouFredSel li a {
    color: #8cabbf;
    display: block;

    font: 700 10px/10px Arial;
    text-decoration: none;

}
#carouFredSel li a img {border: 1px solid #dfe9ee;}

#prev_btn, #next_btn {
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    
    background: #d8e4eb;
    border: 1px solid;
    border-color: #e4ecf1 #8cabbf #8cabbf #e4ecf1;
    cursor: pointer;
    display: block;
    font: 700 10px/10px Arial;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 60px;
}
#prev_btn {left: 40px;}
#next_btn {right: 40px;}

#pager_container {
    background: #d8e4eb;
    border: 1px solid;
    border-color: #e4ecf1 #8cabbf #8cabbf #e4ecf1;
    overflow: hidden;
    padding: 5px;
    text-align: center;
}
#pager_container a {    
    color: #8cabbf;
    cursor: pointer;
    display: block;
    float: left;
    font: 700 12px/12px Arial;
    padding: 5px 2px;
    text-decoration: none;
}
#pager_container a.sameYear {
    color: #a6cae0;
    font-size: 8px;
}

.carouFredSelWrapper {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
#prev_btn, #next_btn,
#pager_container {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#pager_container a.selected {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
}

JavaScript

$(document).ready(function() {
    var defaultCss = {
        opacity: 0,
        width: 0,
        height: 0
    };
    var selectedCss = {
        opacity: 1,
        width: "77px",
        height: "77px"
    };    
    var scroolItems = 6;
    
    $("img").each(function() {
        $(this).attr('src', $(this).attr('src') + '?' + Math.random());
    });
    $("#carouFredSel").carouFredSel({
        items: 1 ,
        responsive:true,
        width:"400px",
        auto: false,
        prev: {
            button: "#prev_btn",
            key: "left",
          },
        next: {
            button: "#next_btn",
            key: "right",

        },        
        scroll: {
            items: 1 ,
            duration: 1000,
            onBefore: function( data ) {
                data.items.old.find('img').animate(defaultCss);
                data.items.visible.eq(scroolItems ).find('img').animate(selectedCss);
            }
        }
    });
});