CarouFredSel Separator

by ignaciocorreia

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>
<div id="home-banner-wrapper">
    <a id="home-banner-prev" href="#">Prev</a>
    <a id="home-banner-next" href="#">Next</a>
    <div id="home-banner-caption">
    <div id="home-banner-pager-wrapper">
        <div id="home-banner-pager" class="nav"></div>
    </div>
    </div><!-- end home-banner-caption -->
    <div id="home-banner" role="banner">
        <img src="http://placehold.it/100x100"  alt="home-banner-image-01.jpg"  />
        <img src="http://placehold.it/100x100"  alt="home-banner-image-02.jpg"  />
        <img src="http://placehold.it/100x100"  alt="home-banner-image-03.jpg"  />
    </div>
</div>

CSS

#home-banner-caption {
    position: absolute;
    bottom: 0;
    z-index: 108;
    background-image: url(http://website.com/wp-content/uploads/2013/08/slider-bg.jpg);
    height:98px;
    width:958px;
}


#home-banner-pager-wrapper {
    position: absolute;
    bottom: 1px;
    left: 10px;
    float: left;
    z-index: 110;
}

#home-banner-pager {
    position: relative;
    /*left: -50%;*/
}

#home-banner-pager a {
    display: block;
    font-size:12px;
    color: #b6b7b6;
    width:29px;
    height:30px;
    border:1px solid #a0a09f;
    text-align:center;
    line-height:2.4;
    background-color: #DEDEDE;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DEDEDE), to(#DEDEDE), color-stop(.5,#EAEAEA));
    background: -moz-linear-gradient(top, #DEDEDE 0%, #EAEAEA 50%, #DEDEDE 100%);

}

#home-banner-pager a:hover,
#home-banner-pager a.activeSlide {
    background: #f8d03b;
    color: #075a96;
    border: 1px solid #fcdf76;

}

#home-banner-pager a:hover:after,
#home-banner-pager a.activeSlide:after,
#home-banner-pager a:hover:before,
#home-banner-pager a.activeSlide:before {
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: auto;
}

#home-banner-pager a:hover:after,
#home-banner-pager a.activeSlide:after {
    border-color: rgba(242, 203, 58, 0);
    border-left-color: #f2cb3a;
    border-width: 6px;
    /*top: 50%;
    margin-top: -6px;/*
    margin-top: 11px;
}
#home-banner-pager a:hover:before,
#home-banner-pager a.activeSlide:before {
    border-color: rgba(252, 223, 118, 0);
    border-left-color: #fcdf76;
    border-width: 7px;
    /*top: 50%;
    margin-top: -7px;*/
    margin-top:11px;
}

JavaScript

$(document).ready(function() {

    $("#home-banner").carouFredSel({

        auto: false,
        circular: true,
        infinite: true,
        responsive: true,
        direction: "left",
        width: null, // automatically calculated
        height: null, // automatically calculated
        align: "center",
        items: {
            visible: 1,
            start: "random"
        },
        prev: {
            button  : "#home-banner-prev"
        },
        next: {
            button  : "#home-banner-next"
        }
        
       
        
    });
   
});