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" />2010</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" />2011</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>
     </ul>
    <div id="prev_btn">Prev</div>
    <div id="next_btn">Next</div>
</div>

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: #edf5f9;
    border: 1px solid #8cabbf;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    width: 680px;
}

#carouFredSel {
    margin: 0 40px;
    width: 600px;
}
#carouFredSel li {
    display: block;
    border-right: solid 1px black;
    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 {
   ...

JavaScript

$(document).ready(function() {
    $("img").each(function() {
        $(this).attr('src', $(this).attr('src') + '?' + Math.random());
    });
    var pager = $("#carouFredSel").carouFredSel({

        items: 6,
       
        auto: true,
        prev: {
            button: "#prev_btn",
            key: "left",
            items: 1
        },
        next: {
            button: "#next_btn",
            key: "right",
            items: 1
        },
         
        
    });
   
});