Jquery Flickerplate Plugin

In this article, we will understand about the jquery flickerplate plugin in detail with the help of various examples.
Example 1:

<! DOCTYPE html>
<html>
<head>
	<title>
	 Jquery Flickerplate Plugin Example 
</title>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type = "text/javascript"> </script>
<script src = "https://raw.github.com/mewowa/Flickerplate/master/css/flickerplate.css"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src =  "https://raw.github.com/mewowa/Flickerplate/master/js/jquery-finger-v0.1.0.js"> </script>
<style>
html {
		font-family: 'Open Sans', Helvetica, Arial, sans-serif;
		background-color: #fff;
		font-weight: 300;
	}
	body {
		margin: 0px;
		padding: 0px;
	}
	.documentation {
		width: 1100px;
		margin: 0px auto;
		padding: 100px 0px;
	}
	.documentation h3 {
		text-align: center;
	}
p {
		text-align: center;
	}
	.documentation h3 {
		margin: 0px 0px 20px 0px;
		font-weight: 300;
		font-size: 2em;
	}
	a {
		color: #E54028;
		text-decoration: none;
	}
a:visited {
		color: #E54028;
		text-decoration: none;
	}
	a:hover {
		color: #c22d18;
		text-decoration: underline;  
		cursor: pointer;
	}
.flickerplate { 
position: relative;
 width: 100%;
height: 600px;
background-color: #e6e6e6;
overflow: hidden }
.flickerplate ul.flicks { 
width: 10000%;
height: 100%; 
padding: 0px;
margin: 0px; list-style: none ;
}
.flickerplate ul.flicks li {
 float: left;
width: 1%; 
height: 100%;
background-position: center; 
background-size: cover; 
display: table }
.flickerplate ul.flicks li .flick-inner {
 height: 100%;
padding: 10px;
color: #fff;
display: table-cell; 
vertical-align: middle; }
.flickerplate ul.flicks li .flick-inner .flick-content { 
max-width: 1100px;
margin-left: auto; margin-right: auto;
}
.flickerplate ul.flicks li .flick-title { 
padding: 0px 0px; 
font-size: 2.778em; line-height: 1.995em; text-align: center; 
}
.flickerplate ul.flicks li .flick-sub-text { 
padding: 5px; 
font-weight: 300; 
line-height: 2.5em;
color: rgba(255,255,255,0.8);
text-align: center; 
}
.flickerplate ul.flicks li .flick-title span.flick-block-text { 
padding: 12px 18px; 
background-color: rgba(0,0,0,0.6);
 }
.flickerplate ul.flicks li .flick-sub-text span.flick-block-text { 
padding: 12px 18px; 
background-color: rgba(0,0,0,0.6);
 }
.flickerplate .arrow-navigation {
 position: absolute;
height: 80%;
width: 10%; 
top: 10%; 
z-index: 100;
overflow: hidden; }
.flickerplate .arrow-navigation .arrow {
 display: block;
height: 100%;
width: 90%; 
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out; }
.flickerplate .arrow-navigation:hover 
{ cursor: pointer; }
,.flickerplate .arrow-navigation .arrow:hover 
{ cursor: pointer; }
.flickerplate .arrow-navigation.left { left: 0%; 
}
.flickerplate .arrow-navigation.left .arrow {
 opacity: 0; 
margin: 0px 0px 0px 50%;
 background-image:url("https://raw.github.com/mewowa/Flickerplate/master/img/arrow-left-light.png");
background-repeat: no-repeat;
 background-position: left;
}
.flickerplate .arrow-navigation.right { right: 0%; }
.flickerplate .arrow-navigation.right .arrow { 
opacity: 0; 
margin: 0px 0px 0px -50%;
background-image:url("https://raw.github.com/mewowa/Flickerplate/master/img/arrow-right-light.png");
background-repeat: no-repeat;
background-position: right; 
}
.flickerplate .arrow-navigation.left.hover .arrow { 
opacity: 1; 
margin: 0px 0px 0px 20% 
}
.flickerplate .arrow-navigation.right.hover .arrow { 
opacity: 1;
margin: 0px 0px 0px -20%;
}
.flickerplate .dot-navigation { 
position: absolute;
bottom: 15px;
width: 100%; 
text-align: center; 
z-index: 100; }
.flickerplate .dot-navigation ul { 
text-align: center;
list-style: none;
padding: 0px 15px; }
.flickerplate .dot-navigation ul li {
	display: inline-block;
	float: none
}
.flickerplate .dot-navigation .dot {
	width: 14px;
	height: 14px;
	margin: 0px 6px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-transition: background-color 0.2s ease-out;
	-moz-transition: background-color 0.2s ease-out;
	-o-transition: background-color 0.2s ease-out;
	-ms-transition: background-color 0.2s ease-out;
	transition: background-color 0.2s ease-out;
}
.flickerplate .dot-navigation .dot:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.6)
}
.flickerplate .dot-navigation .dot.active {
	background-color: #fff
}
.flickerplate .dot-navigation.left {
	text-align: left
}
.flickerplate .dot-navigation.left ul {
	text-align: left
}
.flickerplate .dot-navigation.right {
	text-align: right;
}
.flickerplate .dot-navigation.right ul {
	text-align: right;
}
.flickerplate.flicker-theme-dark .arrow-navigation.left .arrow {
	background-image: url("https://raw.github.com/mewowa/Flickerplate/master/img/arrow-left-dark.png")
}
.flickerplate.flicker-theme-dark .arrow-navigation.right .arrow {
	background-image: url("https://raw.github.com/mewowa/Flickerplate/master/img/arrow-right-dark.png")
}
.flickerplate.flicker-theme-dark .dot-navigation .dot {
	background-color: rgba(0, 0, 0, 0.12)
}
.flickerplate.flicker-theme-dark .dot-navigation .dot:hover {
	background-color: rgba(0, 0, 0, 0.6)
}
.flickerplate.flicker-theme-dark .dot-navigation .dot.active {
	background-color: #000
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner {
	color: rgba(0, 0, 0, 0.9)
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text {
	color: rgba(0, 0, 0, 0.9)
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-title span.flick-block-text {
	background-color: rgba(255, 255, 255, 0.5)
}
.flickerplate.flicker-theme-dark ul.flicks li .flick-inner .flick-content .flick-sub-text span.flick-block-text {
	background-color: rgba(255, 255, 255, 0.5)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner {
	color: rgba(0, 0, 0, 0.9)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text {
	color: rgba(0, 0, 0, 0.9)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-title span.flick-block-text {
	background-color: rgba(255, 255, 255, 0.5)
}
.flickerplate ul.flicks li.flick-theme-dark .flick-inner .flick-content .flick-sub-text span.flick-block-text {
	background-color: rgba(255, 255, 255, 0.5)
}
.flickerplate.animate-transform-slide ul.flicks {
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0%, 0px, 0px);
	-webkit-transform: translate3d(0%, 0px, 0px);
	-webkit-transition: -webkit-transform 0.6s;
	-o-transition: -o-transform 0.6s;
	-moz-transition: -moz-transform 0.6s;
	transition: transform 0.6s
}
.flickerplate.animate-transition-slide ul.flicks {
	position: relative;
	left: 0%;
	-webkit-transition: left 0.4s ease-out;
	-moz-transition: left 0.4s ease-out;
	-o-transition: left 0.4s ease-out;
	-ms-transition: left 0.4s ease-out;
	transition: left 0.4s ease-out
}
.flickerplate.animate-jquery-slide ul.flicks {
	position: relative;
	left: 0%
}
.flickerplate.animate-scroller-slide {
	padding-bottom: 0px;
	overflow: auto
}
.flickerplate.animate-scroller-slide ul.flicks {
	position: auto
}
@media screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 1080px),
screen and (max-width: 700px) {
	.flickerplate ul.flicks li .flick-inner .flick-content .flick-title {
		font-size: 1.667em;
	}
}
</style>
<body>
<div class = "flicker-example" data-block-text = "false">	
		<ul>
			
			<li data-background = "https://raw.github.com/mewowa/Flickerplate/master/img/field.jpg">
				<div class = "flick-title"> Example </div>
				<div class = "flick-sub-text"> Jquery Flickerplate Plugin </div>
			</li>
			<li data-background = "https://raw.github.com/mewowa/Flickerplate/master/img/forest.jpg">
				<div class = "flick-title"> Example </div>
				<div class = "flick-sub-text"> Jquery Flickerplate Plugin </div>
			</li>
			<li data-background = "https://raw.github.com/mewowa/Flickerplate/master/img/frozen-water.jpg">
				<div class = "flick-title"> Example </div>
				<div class = "flick-sub-text"> Jquery Flickerplate Plugin </div>
			</li>		
		</ul>	
	</div>	
</body>
<script>
!function(a) {
	var b = function() {
		var b = this,
		c =0,
		d = !1,
		e = 0,
		f = 0,
		g =  !1;
		b.settings = {
			block_text:  !0, inner_width: !1, theme:"light", flick_animation:"transition-slide", auto_flick: !0, auto_flick_delay:10, dot_navigation: !0, dot_alignment:"center", arrows: !0
		},
		b.init=function(f, h) {
			b.settings=a.extend(b.settings, h),
			d=f,
			d.addClass("flickerplate"),
			d.find("ul:first").addClass("flicks"),
			d.find("li:first").addClass("first-flick"),
			d.attr("data-flick-position", c);
			var i=d.data("flick-animation");
			i&&i.length>0?("transform-slide"==i?b.settings.flick_animation="transform-slide":"transition-slide"==i?b.settings.flick_animation="transition-slide":"jquery-slide"==i?b.settings.flick_animation="jquery-slide":"scroller-slide"==i&&(b.settings.flick_animation="scroller-slide"), d.addClass("animate-" +i)): d.addClass("animate-" +b.settings.flick_animation);
			var j = d.data("theme"),
			k = d.find(".first-flick").data("theme");
			j&&j.length>0?(b.settings.theme=j, d.addClass(k&&k.length>0?"flicker-theme-" +k:"flicker-theme-" +j)): d.addClass("flicker-theme-" +b.settings.theme);
			var l = d.data("block-text");
			if(void 0 !=l&&0==l&&(b.settings.block_text= !1), d.find("li").each(function() {
						e++, a(this).wrapInner('<div class="flick-inner"><div class="flick-content"></div></div>'), $flick_block_text=a(this).data("block-text"), void 0 !=$flick_block_text?1==$flick_block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'), a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>')):1==b.settings.block_text&&(a(this).find(".flick-title").wrapInner('<span class="flick-block-text"></span>'), a(this).find(".flick-sub-text").wrapInner('<span class="flick-block-text"></span>')); var c=a(this).data("background"); c&&c.length>0&&a(this).css("background-image", "url(" +c+")"), $flick_theme=a(this).data("theme"), $flick_theme&&$flick_theme.length>0&&a(this).addClass("flick-theme-" +$flick_theme)
					}), "scroller-slide" !=b.settings.flick_animation) {
				$data_arrow_navigation=d.data("arrows"),
				void 0 !=$data_arrow_navigation?0 !=$data_arrow_navigation&&b.create_arrow_navigation(): 1==b.settings.arrows&&b.create_arrow_navigation(), $data_dot_navigation=d.data("dot-navigation"), $data_dot_alignment=d.data("dot-alignment");
				void 0!=$data_dot_alignment&&("left"==$data_dot_alignment?m="left":"right"==$data_dot_alignment&&(m="right")),
				void 0 !=$data_dot_navigation?0 !=$data_dot_navigation&&b.create_dot_navigation(m):1==b.settings.dot_navigation&&b.create_dot_navigation(m),
				$flick_delay=1e3*b.settings.auto_flick_delay,
				$data_auto_flick=d.data("auto-flick"),
				$data_auto_flick_delay=d.data("auto-flick-delay"),
				$data_auto_flick_delay&&($flick_delay=1e3*$data_auto_flick_delay),
				void 0 !=$data_auto_flick&&(b.settings.auto_flick=0 !=$data_auto_flick?!0:  !1),
				b.auto_flick_start(),
				b.flick_flicker(),
				"jquery-slide" !=b.settings.flick_animation&&d.find("ul.flicks").bind("transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", function() {
						g= !1
			})
		 } },
		b.flick_flicker=function() {
			Modernizr.touch&&d.on("drag", function(a) {
					0==g&&"horizontal"==a.orientation&&(a.preventDefault(), 1==a.direction?(c--, 0>c?c=0:(g= !0, b.move_flicker(c))):(c++, c==e?c=e-1:(g= !0, b.move_flicker(c))))
				})
		},
		b.create_arrow_navigation=function() {
			$arrow_nav_html='<div class = "arrow-navigation left"> <div class="arrow"> </div> </div>',
			$arrow_nav_html+='<div class = "arrow-navigation right"> <div class = "arrow"> </div> </div>',
			d.prepend($arrow_nav_html),
			a(".arrow-navigation").mouseover(function() {
					0==a(this).hasClass("hover")&&a(this).addClass("hover")

				}),
			a(".arrow-navigation").mouseout(function() {
					1==a(this).hasClass("hover")&&a(this).removeClass("hover")

				}),
			a(".arrow-navigation").on("click", function() {
					a(this).hasClass("right")?(c++, c==e&&(c=0)):(c--, 0>c&&(c=e-1)), b.move_flicker(c)
				})
		},
		b.create_dot_navigation = function(c) {
			for($dot_nav_html='<div class="dot-navigation ' +c+'"> <ul>'; e>f; )f++,
			$dot_nav_html+=1==f?'<li> <div class="dot active"> </div> </li>': '<li> <div class="dot"> </div> </li>';
			$dot_nav_html+="</ul> </div>",
			d.prepend($dot_nav_html),
			d.find(".dot-navigation li").on("click", function() {
					b.move_flicker(a(this).index())
				})
		},
		b.auto_flick_start = function() {
			1 == b.settings.auto_flick&&(b.flicker_auto=setInterval(b.auto_flick, $flick_delay))
		},
		b.auto_flick=function() {
			c++,
			c==e&&(c=0),
			b.move_flicker(c)
		},
		b.auto_flick_stop = function() {
			b.flicker_auto=clearInterval(b.flicker_auto)
		},
		b.auto_flick_reset = function() {
			b.auto_flick_stop(),
			b.auto_flick_start()
		},
		b.move_flicker=function(a) {
			c = a,
			"transform-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
				style:"-webkit-transform:translate3d(-" +c+"%, 0, 0);-o-transform:translate3d(-" +c+"%, 0, 0);-moz-transform:translate3d(-" +c+"%, 0, 0);transform:translate3d(-" +c+"%, 0, 0)"
			}):"transition-slide"==b.settings.flick_animation?d.find("ul.flicks").attr({
			style:"left:-" +c+"00%;"
		}):"jquery-slide"==b.settings.flick_animation&&d.find("ul.flicks").animate({
		left:"-" +c+"00%"
	}
	, function() {
		G = !1
	}),
$crt_flick = d.find("ul.flicks li:eq(" +c+")"),
d.removeClass("flicker-theme-light").removeClass("flicker-theme-dark"),
d.addClass($crt_flick.hasClass("flick-theme-dark")?"flicker-theme-dark":$crt_flick.hasClass("flick-theme-light")?"flicker-theme-light":"flicker-theme-" +b.settings.theme),
d.find(".dot-navigation .dot.active").removeClass("active"),
d.find(".dot:eq(" +c+")").addClass("active"),
d.attr("data-flick-position", c),
b.auto_flick_reset()
}
};
a.fn.flicker=function(c) {
	var d=this.length;
	return this.each(function(e) {
			var f=a(this), g="flickerplate" +(d>1?"-" + ++e:""), h=(new b).init(f, c); f.data(g, h).data("key", g)
		})
} }
(jQuery);
	$(document).ready(function() {	
		$('.flicker-example').flicker();
	});
</script>
</body>
</html>
Explanation:
In the above example, we created an example of jquery flicker plugin.
Output:
Following is the output of this example.