Make slider keyboard accessible #108

.jshintrc

@@ -0,0 +1,3 @@
+{
+	"esnext": true
+}

dist/css/glide.core.css

@@ -52,9 +52,6 @@
       -ms-user-select: none;
           user-select: none;
 }
-.glide__bullets li {
-  cursor: pointer;
-}
 .glide--slider .glide__slide {
   float: left;
   clear: none;

dist/css/glide.theme.css

@@ -8,8 +8,8 @@
 }
 .glide--vertical .glide__arrows {
   left: 50%;
-  height: 92%;
-  margin-top: 4%;
+  height: 88%;
+  margin-top: 6%;
 }
 .glide__arrow {
   position: absolute;
@@ -18,6 +18,7 @@
   text-transform: uppercase;
   font: 11px Arial, sans-serif;
   padding: 9px 12px;
+  background-color: transparent;
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 4px;
   -webkit-transition: border 300ms ease-in-out;
@@ -68,7 +69,7 @@
       -ms-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-.glide__bullets li {
+.glide__bullets button {
   display: inline-block;
   background-color: rgba(255, 255, 255, 0.5);
   width: 12px;
@@ -79,25 +80,23 @@
   -webkit-transition: all 300ms ease-in-out;
           transition: all 300ms ease-in-out;
 }
-.glide--horizontal .glide__bullets li {
+.glide--horizontal .glide__bullets button {
   margin: 0 5px;
 }
-.glide--vertical .glide__bullets li {
+.glide--vertical .glide__bullets button {
   vertical-align: middle;
 }
-.glide__bullets li:hover {
-  border: 2px solid white;
-}
-.glide__bullets li.active {
+.glide__bullets button.active {
   background-color: white;
 }
+.glide__bullets button:hover {
+  border: 2px solid white;
+}
 .glide--slider .glide__arrow {
   opacity: 1;
-  -webkit-transition: visibility 0 ease 150ms,
-						opacity 150ms ease;
-          transition: visibility 0 ease 150ms,
-						opacity 150ms ease;
+  -webkit-transition: opacity 150ms ease;
+          transition: opacity 150ms ease;
 }
 .glide--slider .glide__arrow.disabled {
-  opacity: 0.5;
+  opacity: 0.33;
 }

dist/glide.js

@@ -570,7 +570,7 @@ var Bullets = function(Glide, Core) {
 		this.wrapper = Glide.slider.children('.' + Glide.options.classes.bullets);
 
 		for(var i = 1; i <= Glide.length; i++) {
-			$('<li>', {
+			$('<button>', {
 				'class': Glide.options.classes.bullet,
 				'data-glide-dir': '=' + i
 			}).appendTo(this.wrapper);
@@ -623,7 +623,7 @@ var Bullets = function(Glide, Core) {
 	 * bullets events
 	 */
 	Module.prototype.bind = function() {
-		return this.wrapper.on('click.glide touchstart.glide', 'li', this.click);
+		return this.wrapper.on('click.glide touchstart.glide', 'button', this.click);
 	};
 
 
@@ -632,7 +632,7 @@ var Bullets = function(Glide, Core) {
 	 * bullets events
 	 */
 	Module.prototype.unbind = function() {
-		return this.wrapper.on('click.glide touchstart.glide', 'li');
+		return this.wrapper.on('click.glide touchstart.glide', 'button');
 	};
 
 
@@ -1375,11 +1375,8 @@ var Touch = function(Glide, Core) {
 				if (Core.Run.isEnd() && subEySy < 0) return;
 			}
 
-			var lower45 = (this.touchSin * 180 / Math.PI) < 45;
-			var upper45 = (this.touchSin * 180 / Math.PI) < 45;
-
 			// While angle is lower than 45 degree
-			if ( this.byAxis(lower45, upper45) ) {
+			if ( (this.touchSin * 180 / Math.PI) < 45 ) {
 				// Prevent propagation
 				event.stopPropagation();
 				// Prevent scrolling
@@ -1441,9 +1438,6 @@ var Touch = function(Glide, Core) {
 
 			}
 
-			var lower45 = touchDeg < 45;
-			var upper45 = touchDeg < 45;
-
 			// While touch is positive and greater than distance set in options
 			// move backward
 			if (touchDistance > Glide.options.touchDistance && touchDeg < 45) Core.Run.make('<');