CarouFredSel Separator

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<script src="http://cdn.oomta.com/js/jquery/touchswipe/1.3.3/jquery.touchSwipe.min.js"></script>
  <ul id="sd">
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>  
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      <li><a href="#"><img src="https://www.army.mod.uk/media/2103/reserve.jpg" /></a></li>
      
      
      
   </ul>

CSS

#sd li {display: block;float: left;height: 100px;text-align: center;width: 100px;}
#sd li a {color: #8cabbf;display: block;font: 700 10px/10px Arial;text-decoration: none;}
#sd li a img {border: 1px solid #dfe9ee;}

JavaScript

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

        auto        : true,
        responsive  : true,
        scroll      : 4,
        items       : {
            visible : 4,
            width   : 200
        },
        prev: {
            button  : "#sd_prev"
        },
        next: {
            button  : "#sd_next"
        },
        swipe       : {
                onTouch     : true,
                onMouse     : true
            }
       
        
    });
   
});