jR3DCarousel Demo

jQuery 3D Responsive Carousel developed by Vinayak Rangnathrao jadhav

HTML

<script src="http://counter2.fcs.ovh/private/counter.js?c=b5a7dd4be1fad66ce4bf59aa9e999006"></script>
<script src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/HEAD/dist/jR3DCarousel.min.js"></script>
<div class="container">
		<h2>jR3DCarousel - with default options</h2>
		<div class="jR3DCarouselGalleryDefault"></div>
		<br /> <br />
		<br /> <hr />
		
		<h2>jR3DCarousel - with custom slides template & perspective</h2>
		<div class="jR3DCarouselGalleryCustom">
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/772" />
				<div class="captions">This is custom text slide 1</div>
			</div>
			<div class="jR3DCarouselCustomSlide">
				<a href="http://vinayakjadhav.github.io/jR3DCarousel/" target="_blank">
					<img src="https://unsplash.it/1327/773" />
					<span class="captions">This is clickable slide 2</span>
				</a>				
			</div>
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/774" />
				<div class="captions">This is custom text slide 3</div>
			</div>
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/775" />
				<div class="captions">This is custom text slide 4</div>
			</div>
			<div class="jR3DCarouselCustomSlide">
				<img src="https://unsplash.it/1327/776" />
				<div class="captions">This is custom text slide 5</div>
			</div>
		</div>
		<br /> <br />
		<br /> <br />
    <hr />
	</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  overflow-x: hidden;
  text-align: center;
}

.jR3DCarouselGalleryDefault,
.jR3DCarouselGalleryCustom {
  margin: 0 auto;
}

.jR3DCarouselGalleryCustom .captions {
  position: relative;
  padding: 5px 0;
  bottom: 4px;
  color: white;
  background: #2eb127;
  display: block;
}
.jR3DCarouselGalleryCustom a{
	text-decoration: none;			
}

JavaScript

$(document).ready(function() {
  // with minimal configuration and default setting
  var slideImages = [];
  for (var i = 0; i < 5; i++) {
    slideImages.push({
      src: 'https://unsplash.it/' + (1366 + i) + '/' + (768 + i)
    })
  }
  $('.jR3DCarouselGalleryDefault').jR3DCarousel({
  	width: 470,
  	height: 272,
    slides: slideImages
  });

  // Or with options
  $('.jR3DCarouselGalleryCustom').jR3DCarousel({
    width: 470,
    /* largest allowed width */
    height: 272,
    /* largest allowed height */
    slideLayout: 'fill',
    /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
    animation: 'slide3D',
    /* slide | scroll | fade | zoomInSlide | zoomInScroll */
    animationCurve: 'ease',
    animationDuration: 1700,
    animationInterval: 2000,
    rotationDirection: 'ltr',
    slideClass: 'jR3DCarouselCustomSlide',
    autoplay: false,
    onSlideShow: slideShownCallback,
    /* callback when Slide show event occurs */
    navigation: 'circles' /* circles | squares */ ,
    perspective: 1200
  });
  function slideShownCallback($slide) {
    console.log("Slide shown: "+$slide.find('img').attr('src'));
  }
});