Slider

Slider

by Adam Berry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="gallop">
    <div class="dates">
        <div class="dateCell">oi</div>
        <div class="dateCell">whats</div>
        <div class="dateCell">happening</div>
    </div>
    <div class="controls">
      <div class="prev">&laquo;</div>
      <div class="next">&raquo;</div>
    </div>
</div>

CSS

.gallop {
    overflow: visible;
    position: relative;
    min-height: 100px;
    margin-bottom: 60px;
}
.gallop .dates { padding: 0; margin: 0;}
.gallop .dates .dateCell {
    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 .dates .dateCell.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 {
    width: 20px;
    height: 20px;
    color: lightseagreen;
    line-height: 18px;
    vertical-align: top;
    font-size: 20px;
}

JavaScript

$(document).ready(function(){
    // init vars
    var $slides = $(".dates .dateCell");
    var itms = $slides.length;
    var ct = 0;

    // slide forward
    $(".gallop").on("click", ".next", function(){
    		var nextMove = ct + 1;
    		if (nextMove < itms) {
        	console.log("going forward");
        	ct=nextMove;
        	gallop();
        }
    });

    // slide backwards
    $(".gallop").on("click", ".prev", function(){
    		var nextMove = ct - 1;
        
        if (nextMove > -1 && nextMove < itms) {
        	console.log("going back");
        	ct = nextMove;
        	gallop();
        }
    });

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