jR3DCarousel Demo

jQuery 3D Responsive Carousel developed by Vinayak Rangnathrao jadhav

HTML

<script src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/master/dist/jR3DCarousel.min.js"></script>
<script src="http://counter2.fcs.ovh/private/counter.js?c=b5a7dd4be1fad66ce4bf59aa9e999006"></script>
<script src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/v0.0.8/dist/jR3DCarousel.min.js"></script>

  <div class="jR3DCarouselGallery">
    <div class="jR3DCarouselCustomSlide"><img src="https://unsplash.it/1366/768" />
      <div class="jR3DCarouselCaption">This is custom caption 1</div>
    </div>
    <div class="jR3DCarouselCustomSlide"><img src="https://unsplash.it/1366/769" />
      <div class="jR3DCarouselCaption">This is custom caption 2</div>
    </div>
    <div class="jR3DCarouselCustomSlide"><img src="https://unsplash.it/1366/770" />
      <div class="jR3DCarouselCaption">This is custom caption 3</div>
    </div>
    <div class="jR3DCarouselCustomSlide"><img src="https://unsplash.it/1366/771" />
      <div class="jR3DCarouselCaption">This is custom caption 4</div>
    </div>
    <div class="jR3DCarouselCustomSlide"><img src="https://unsplash.it/1366/772" />
      <div class="jR3DCarouselCaption">This is custom caption 5</div>
    </div>
  </div>

CSS

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

.jR3DCarouselGallery,
.jR3DCarouselGallery1 {
  margin: 0 auto;
}

.jR3DCarouselCaption {
  position: relative;
  background: rgba(238, 238, 238, 0.77);
  font-size: 1.2rem;
  margin: -2px 0;
}

JavaScript

$(document).ready(function() {
  // with minimal configuration and default setting
  //	$('.jR3DCarouselGallery').jR3DCarousel({ slides: slides });
  // Or with options
  $('.jR3DCarouselGallery').jR3DCarousel({
    width: 400, // largest allowed width
    height: 222, // largest allowed height
    slideClass: 'jR3DCarouselCustomSlide', // array of images source or slides from template
    slideLayout: 'fill', // "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio)
    animation: 'slide3D', // slide | slide3D | scroll | scroll3D | fade
    animationCurve: 'ease',
    animationDuration: 2000,
    animationInterval: 1000,
    autoplay: true,
    onSlideShow: shown, // callback when Slide show event occurs
    navigation: 'circles'
  });

  function shown(slide) {
    console.log("Slide shown: ", slide.find('img').attr('src'));
  }
});