A2z slider demo

by ian_smithz

HTML

<meta name="viewport" content="width=device-width, initial-scale=1" />
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>

<div class="widget-container">
<div id="left" class="arrow">&lt;</div>
<div id="right" class="arrow">&gt;</div>
<div id="a2z-container">
    <div class="a2z-bar hide">
        <div>
            <ul>
                <li><a href="http://www.cdc.gov/az/a.html">A</a>

                </li>
                <li><a href="http://www.cdc.gov/az/b.html">B</a>

                </li>
                <li><a href="http://www.cdc.gov/az/c.html">C</a>

                </li>
                <li><a href="http://www.cdc.gov/az/d.html">D</a>

                </li>
                <li><a href="http://www.cdc.gov/az/e.html">E</a>

                </li>
                <li><a href="http://www.cdc.gov/az/f.html">F</a>

                </li>
                <li><a href="http://www.cdc.gov/az/g.html">G</a>

                </li>
                <li><a href="http://www.cdc.gov/az/h.html">H</a>

                </li>
                <li><a href="http://www.cdc.gov/az/i.html">I</a>

                </li>
                <li><a href="http://www.cdc.gov/az/j.html">J</a>

                </li>
                <li><a href="http://www.cdc.gov/az/k.html">K</a>

                </li>
                <li><a href="http://www.cdc.gov/az/l.html">L</a>

                </li>
                <li><a href="http://www.cdc.gov/az/m.html">M</a>

                </li>
                <li><a href="http://www.cdc.gov/az/n.html">N</a>

                </li>
                <li><a href="http://www.cdc.gov/az/o.html">O</a>

                </li>
                <li><a href="http://www.cdc.gov/az/p.html">P</a>

                </li>
                <li><a href="http://www.cdc.gov/az/q.html">Q</a>

                </li>
                <li><a...

CSS

#a2z-container {
    width:196px;
    overflow:hidden;
    background: #075290;
    position:relative;
    height:40px;
    float: left;
  /* outline:1px solid red */

}

.widget-container {
  width: 276px;
  
  margin-top:140px; /* just to move it away */
  /* outline:1px solid orange; */
  margin-left: auto ;
  margin-right: auto ;    
}

.a2z-bar {
    background: #075290;
    margin-right: 0;
    /* changes */
    /* border-bottom: 1px solid #c0c0c0; */
	position:absolute;
	top:0;
    left:-30px;
	cursor:pointer; 
  
}
.a2z-bar ul {
    margin: 0;
    text-align: left;
    white-space:nowrap;
}
.a2z-bar li {
    border: 0;
    display: inline-block;
    text-align: center;
    line-height: 41px;
}
.a2z-bar li a {
    color: #ffffff;
    display: block;
    width: 41px;
    font-weight: 700;
}
.a2z-bar li a[href='#'] {
    color: #c0c0c0;
}
.a2z-bar :first-child {
    border: 0;
}

#left {
  float:left;
}

#right {
  float: right;
  
}

.arrow {
  cursor:pointer;
  font-size:34px;
  width:40px;
  height:40px;
  /* outline:1px solid red; */
  text-align:center;
}

JavaScript

/*! jQuery plugin for Hammer.JS - v1.1.3 - 2014-05-20
 * http://eightmedia.github.com/hammer.js
 *
 * Copyright (c) 2014 Jorik Tangelder <[email protected]>;
 * Licensed under the MIT license */

!function(a,b){"use strict";function c(a,c){Date.now||(Date.now=function(){return(new Date).getTime()}),a.utils.each(["on","off"],function(d){a.utils[d]=function(a,e,f){c(a)[d](e,function(a){var d=c.extend({},a.originalEvent,a);d.button===b&&(d.button=a.which-1),f.call(this,d)})}}),a.Instance.prototype.trigger=function(a,b){var d=c(this.element);return d.has(b.target).length&&(d=c(b.target)),d.trigger({type:a,gesture:b})},c.fn.hammer=function(b){return this.each(function(){var d=c(this),e=d.data("hammer");e?e&&b&&a.utils.extend(e.options,b):d.data("hammer",new a(this,b||{}))})}}"function"==typeof define&&define.amd?define(["hammerjs","jquery"],c):c(a.Hammer,a.jQuery||a.Zepto)}(window);
//# sourceMappingURL=jquery.hammer.min.map

var options = {
  dragLockToAxis: true,
  dragBlockHorizontal: true
},
    element = $('.a2z-bar'),
    position = 0,
    maxPosition = 6,  //determine a way to determine this!
    speed = 300,
    distance = 180;



element
  .hammer(options)
  .on("swipeleft", function(e) { 
          e.gesture.preventDefault();
          console.log(e);
    if(position < maxPosition) {
          $(this).stop().animate({left: "-=" + distance}, speed);
          position++;
    }
  }).on("swiperight", function(e) {
          e.gesture.preventDefault();
          console.log(e);
  if(position > 0) {
          $(this).stop().animate({left: "+=" + distance}, speed); 
    position--;
  }
});

$('#left').hammer().on('tap', function(e){
          e.preventDefault();
  console.log(position); 
          
if(position > 0) {  
  console.log(e);
          element.stop().animate({left: "+=" + distance}, speed); 
  position--;
}  
});

$('#right').hammer().on('tap', function(e){
          e.preventDefault();
       console.log(position < maxPosition);   
    if(position...