Image slide with single img

Nice image slide animation with a single img, animate css and a little jQuery

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.11.2/jquery.min.js"></script>

2. HTML

<div class="center animated">
        <img class="animated" src="https://d13yacurqjgara.cloudfront.net/users/35381/screenshots/1875997/island_1x.png" alt=""/>
</div>

3. JAVASCRIPT

var imgs=[
	"https://d13yacurqjgara.cloudfront.net/users/35381/screenshots/1875997/island_1x.png",
	"https://d13yacurqjgara.cloudfront.net/users/6234/screenshots/576316/banana.png",
	"https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1865816/rescued-illos_1x.png",
	"https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1866686/rivalry_1x.png",
	"https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1793074/sir_crags_a_lot_1x.png",
	"https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1732019/sf-cryptids_1x.png",
	"https://d13yacurqjgara.cloudfront.net/users/3460/screenshots/1693011/db_space_1x.png",
	"https://d13yacurqjgara.cloudfront.net/users/35381/screenshots/1858090/xmas1_1x.png"
];
var counter =0;
$(document).ready(function () {
	$(".center").on("click","img",function(){
	    $(this).removeClass("zoomIn").addClass("fadeOutRight");
	    counter++;
	    setTimeout(function(){
		if(counter==imgs.length) counter=0;
		$(".center img").remove();
		$("<img/>").attr("src",imgs[counter]).addClass("animated zoomIn").insertBefore($(".center p"));
		if(imgs[counter+1]!=undefined) $(".center").css("backgroundImage","url("+imgs[counter+1]+")")
	    },500);
	});
});