jRCarousel Demo

HTML

<script src="https://cdn.rawgit.com/vinayakjadhav/jRCarousel/master/dist/jRCarousel.min.js"></script>
<title>jRCarousel - a Responsive Carousel</title>
<body>
	<div class="container">
		<h1>jRCarousel - jQuery Responsive Carousel</h1>
		<div>
			<div class="jRCarouselGallery"></div>
			<h2>^ jRCarousel Gallery Default, minimal Configuration </h2>
		</div>
		<br/>
		<hr/>
		<div>
			<h2>jRCarousel Gallery - with all available options </h2>
			onAnimationComplete Slide shown: <span class="imgSlide"></span>
			<div class="jRCarouselGallery1"></div>
		</div>
		<br/>
		<hr/>
		<div>
			<h2>jRCarousel Gallery - with slides in template </h2>
			<div class="jRCarouselGallery2">
				<img class="slide" src="https://placehold.it/360x270" />
				<img class="slide" src="https://placehold.it/360x270" />
				<img class="slide" src="https://placehold.it/360x270" />
				<img class="slide" src="https://placehold.it/360x2704" />
				<img class="slide" src="https://placehold.it/360x270" />
			</div>
		</div>
		<br/>
		<hr/>
	</div>
</body>
</html>

CSS

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
	margin: 0 auto;
}
h1,h2{
	margin: 2px auto;
}
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}

.jRCarouselGallery,.jRCarouselGallery1,.jRCarouselGallery2 {
	margin: 0 auto; /* optional - if want to center align */
}

.container {
	text-align: center;
}

JavaScript

$(document).ready(function(){
	//var slides = ['images/020.jpg','images/01.jpg','images/02.jpg','images/03.jpg','images/04.jpg']
	var slides = [{src: 'https://placehold.it/360x270'},
	              {src: 'https://placehold.it/360x270'},
	              {src: 'https://placehold.it/360x270'},
	              {src: 'https://placehold.it/360x270'},
	              {src: 'https://placehold.it/360x270'},
	              {src: 'https://placehold.it/360x270'},
	              {src: 'https://placehold.it/360x270'}];
	
	$('.jRCarouselGallery').jRCarousel({
		  slides: slides
	});
	
 	$('.jRCarouselGallery1').jRCarousel({
 		  width: 800, 				/* largest allowed width */
		  height: 442, 				/* largest allowed height */
		  slides: slides, 			/* array of images source or gets slides by 'slide' class */
		  slideLayout : 'contain',  /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
		  animation: 'scroll', 		/* slide | scroll | fade | zoomInSlide | zoomInScroll */
		  animationSpeed: 400,
		  animationInterval: 4000,
		  autoplay: true,
		  onSlideShow: show,		/* callback when Slide show event occurs */
		  navigation: 'circles'		/* circles | squares */
	});
 	
	$('.jRCarouselGallery2').jRCarousel({
		  width: 800,
		  height: 356,
		  autoplay: false,
		  animation: 'fade',
		  navigation: 'squares'
	});
	
	function show(slide){
		$('.imgSlide').text(slide.attr('src'))
	}
})