Gallop Carousel Slider Demo

by Adam Berry

HTML

<h1>Gallop Carousel Slider Demo</h1>
<a href="https://github.com/brentonstrine/gallop-carousel-slider" class="demo-link" target="_parent">Download the<br/>source from GitHub.</a>
<p>Picker dots are generated based on how many items are in your list:</p>
<div class="gallop">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
<p class="demo-next"><a href="http://jsfiddle.net/brentonstrine/k38199k5/2/" target="_parent">Continue to next page of demo &raquo;</a></p>

CSS

.gallop {
    overflow: visible;
    position: relative;
    min-height: 100px;
    background-color: lightgrey;
    margin-bottom: 60px;
}
.gallop ul { padding: 0; margin: 0;}
.gallop li:nth-child(even) { background-color: lightblue;}
.gallop li:nth-child(odd) { background-color: lightskyblue;}
.gallop li {
    width: 0px;
    height: 100%;
    transition-property: width;
    transition-duration:.3s;
    transition-timing-function: ease;
    list-style: none;
    display: block;
    overflow: hidden;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    width:0;
}
.gallop li.active {
    left:auto;
    right:0;
    width: 100%;
    transition-property: width;
    transition-duration: .35s;
    transition-timing-function: ease;
}
.gallop .controls {
    position: absolute;
    bottom: -40px;
    right: 0;
    left:0;
    background: #fff;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;
}
.gallop .controls .advance,
.gallop .controls .retreat,
.gallop .controls .autoplay,
.gallop .controls .picker {
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}
.gallop .controls .picker {
    border-radius: 15px;
    height: 10px;
    width: 10px;
    background-color: lightseagreen;
    border: solid 5px #fff;
    font-size: 9px;
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 10px;
    overflow: hidden;
}
.gallop .controls .picker:hover,
.gallop .picker.active {
    background-color: lightgreen;
    border-width: 0;
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 15px;
}
.gallop .controls .advance,
.gallop .controls .retreat {
    width: 20px;
    height: 20px;
    color: lightseagreen;
    line-height: 18px;
    vertical-align: top;
    font-size: 20px;
}
.gallop .controls .advance:hover,
.gallop .controls .retreat:hover...

JavaScript

$(document).ready(function(){
    // settings
    var autoPlay = false;
    var autoPlaySpeed = 3000;

    // init vars
    var $gallop = $(".gallop");
    var $slides = $("li");
    var itms = $slides.length;
    var ct = 0;
    var controls = '';
    var timeout;

    // create controls
    controls += '<div class="retreat">&laquo;</div>';
    controls += '<div class="autoplay"></div>';
    for (var i = 0; i < itms; i++) {
        controls += "<div class='picker' data-item='"+i+"'>"+(i+1)+"</div>";
    }
    controls += '<div class="advance">&raquo;</div>';
    $gallop.append("<div class='controls'/>").find(".controls").append(controls);
    var $pickers = $(".picker");

    // slide forward
    $(".gallop").on("click", ".advance", function(){
        gallop();
    });

    // slide backwards
    $(".gallop").on("click", ".retreat", function(){
        ct = ct -2;
        gallop();
    });

    // toggle autoplay
    $(".gallop").on("click", ".autoplay", function(){
        $(this).toggleClass("off");
        autoPlay = (autoPlay) ? false : true;
        autoGallop();
    });

    // slide pick handler
    $(".gallop").on("click", ".picker", function(){
        pickItem($(this).attr("data-item"));
    });

    // advance slide
    function gallop() {
        $slides.removeClass("active").eq(ct%itms).addClass("active");
        $pickers.removeClass("active").eq(ct%itms).addClass("active");
        ct++;
    }
});