add innaccessible carousel

assets/ik_carousel.js

@@ -0,0 +1,194 @@
+;(function ( $, window, document, undefined ) {
+
+	var pluginName = 'ik_carousel',
+		defaults = { // default settings
+			'animationSpeed' : 3000
+		};
+
+	/**
+	 * @constructs Plugin
+	 * @param {Object} element - Current DOM element from selected collection.
+	 * @param {Object} options - Configuration options.
+	 * @param {string} options.instructions - Custom instructions for screen reader users.
+	 * @param {number} options.animationSpeed - Slide transition speed in milliseconds.
+	 */
+	function Plugin( element, options ) {
+
+		this._name = pluginName;
+		this._defaults = defaults;
+		this.element = $(element);
+		this.options = $.extend( {}, defaults, options) ;
+
+		this.init();
+
+	};
+
+	/** Initializes plugin. */
+	Plugin.prototype.init = function () {
+
+		var id, plugin, $elem, $image, $controls, $navbar;
+
+		plugin = this;
+		id = 'carousel' + $('.ik_slider').length;
+		$elem = plugin.element;
+
+		$elem
+			.attr({
+				'id': id
+			})
+			.addClass('ik_carousel')
+			.on('mouseenter', {'plugin': plugin}, plugin.stopTimer)
+			.on('mouseleave', {'plugin': plugin}, plugin.startTimer)
+
+		$controls = $('<div/>')
+
+			.addClass('ik_controls')
+			.appendTo($elem);
+
+		$('<div/>')
+			.addClass('ik_button ik_prev')
+			.on('click', {'plugin': plugin, 'slide': 'left'}, plugin.gotoSlide)
+			.appendTo($controls);
+
+		$('<div/>')
+			.addClass('ik_button ik_next')
+			.on('click', {'plugin': plugin, 'slide': 'right'}, plugin.gotoSlide)
+			.appendTo($controls);
+
+		$navbar = $('<ul/>')
+			.addClass('ik_navbar')
+			.appendTo($controls);
+
+		plugin.slides = $elem
+			.children('figure')
+			.each(function(i, el) {
+				var $me, $src;
+
+				$me = $(el);
+				$src = $me.find('img').remove().attr('src');
+
+				$me.css({
+						'background-image': 'url(' + $src + ')'
+					});	
+
+				$('<li/>')
+					.on('click', {'plugin': plugin, 'slide': i}, plugin.gotoSlide)
+					.appendTo($navbar);
+			});
+
+		plugin.navbuttons = $navbar.children('li');
+		plugin.slides.first().addClass('active');
+		plugin.navbuttons.first().addClass('active');
+		plugin.startTimer({'data':{'plugin': plugin}});
+
+	};
+
+	/** 
+	 * Starts carousel timer. 
+	 * Reference to plugin must be passed with event data.
+	 * 
+	 * @param {Object} event - Mouse or focus event.
+	 */
+	Plugin.prototype.startTimer = function (event) {
+
+		var plugin;
+
+		$elem = $(this);
+		plugin = event.data.plugin;
+
+		if(plugin.timer) {
+			clearInterval(plugin.timer);
+			plugin.timer = null;
+		}
+
+		plugin.timer = setInterval(plugin.gotoSlide, plugin.options.animationSpeed, {'data':{'plugin': plugin, 'slide': 'right'}});
+
+	};
+
+	/** 
+	 * Stops carousel timer. 
+	 * 
+	 * @param {object} event - Mouse or focus event.
+	 * @param {object} event.data - Event data.
+	 * @param {object} event.data.plugin - Reference to plugin.
+	 */
+	Plugin.prototype.stopTimer = function (event) {
+
+		var plugin = event.data.plugin;
+		clearInterval(plugin.timer);
+		plugin.timer = null;
+
+	};
+
+	/** 
+	 * Goes to specified slide. 
+	 * 
+	 * @param {object} event - Mouse or focus event.
+	 * @param {object} event.data - Event data.
+	 * @param {object} event.data.plugin - Reference to plugin.
+	 * @param {number} event.data.slide - Index of the slide to show.
+	 */
+	Plugin.prototype.gotoSlide = function (event) {
+
+		var plugin, n, $elem, $active, $next, index, direction, transevent;
+
+		plugin = event.data.plugin;
+		n = event.data.slide;
+		$elem = plugin.element;
+		$active = $elem.children('.active');
+		index = $active.index();
+
+		if (typeof n === 'string') {
+
+			if(n === 'left') {
+				direction = 'left';
+				n = index == 0 ? plugin.slides.length - 1 : --index;
+			} else {
+				direction = 'right'
+				n = index == plugin.slides.length - 1 ? 0 : ++index;
+			}
+
+		} else {
+			if (index < n || (index == 0 && n == plugin.slides.length - 1)) {
+				direction = 'left';
+			} else {
+				direction = 'right';
+			}
+		}
+
+		$next = plugin.slides.eq(n).addClass('next');
+		transevent = ik_utils.getTransitionEventName();
+		$active.addClass(direction).on(transevent, {'next': $next, 'dir': direction}, function(event) {
+
+			var active, next, dir;
+
+			active = $(this);
+			next = event.data.next;
+			dir = event.data.dir;
+
+			active.off( ik_utils.getTransitionEventName() )
+				.removeClass(direction + ' active');
+
+			next.removeClass('next')
+				.addClass('active');
+
+		});
+
+		plugin.navbuttons.removeClass('active').eq(n).addClass('active');
+
+	}
+
+	$.fn[pluginName] = function ( options ) {
+
+		return this.each(function () {
+
+			if ( !$.data(this, pluginName )) {
+				$.data( this, pluginName,
+				new Plugin( this, options ));
+			}
+
+		});
+
+	}
+
+})( jQuery, window, document );

carousel.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="cache-control" content="no-cache">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<title>IK Library: Carousel</title>
+		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+		<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">
+		<script src="assets/ik_utils.js"></script>
+		<script src="assets/ik_carousel.js"></script>
+		<script>
+
+			var timer;
+
+			$(document).ready(function() {
+
+				$(".carousel").ik_carousel();
+
+			});
+
+		</script>
+	</head>
+	<body>
+		<main>
+			<a href="index.html">&larr; Index</a>
+			<h1>Carousel</h1>
+			<div class="carousel">
+				<figure>
+					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Kasteel_van_Chambord%2C_2007.jpg/1024px-Kasteel_van_Chambord%2C_2007.jpg" target="_blank" alt="">
+					<figcaption style="background-color:rgba(0,0,0,.5)">
+						<h2>Château de Chambord</h2>
+						<p>By <a href="https://commons.wikimedia.org/w/index.php?curid=26258460">Hubert DENIES</a></p>
+					</figcaption>
+				</figure>
+				<figure>
+					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Bratislava%2C_Hrad%2C_Slovensko.jpg/1280px-Bratislava%2C_Hrad%2C_Slovensko.jpg" target="_blank" alt="">
+					<figcaption style="background-color:rgba(0,0,0,.5)">
+						<h2>Bratislavský hrad</h2>
+						<p>By <a href="https://commons.wikimedia.org/wiki/User:LMih">LMih</a></p>
+					</figcaption>
+				</figure>
+				<figure>
+					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Burg_Karlstein_-_Karl%C5%A1tejn_-_panoramio.jpg/1280px-Burg_Karlstein_-_Karl%C5%A1tejn_-_panoramio.jpg" target="_blank" alt="">
+					<figcaption style="background-color:rgba(0,0,0,.5)">
+						<h2>Karlštejn castle</h2>
+						<p>By Jürgen Regel</p>
+					</figcaption>
+				</figure>
+			</div>
+		</main>
+	</body>
+</html>