<div class="container">
<div class="jR3DCarouselGallery"></div>
<br /> <br />
<br /> <br />
<div class="jR3DCarouselGalleryCustomeTemplate">
<div class="jR3DCarouselCustomSlide">
<img src="http://thejetsettraveller.com/wp-content/uploads/2015/06/The-Jetset-Traveller-slider-image-2.jpg" />
<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="http://www.smartholidayshop.com/blog/wp-content/uploads/2017/05/Dune-Bashing.jpg" />
<span class="captions">This is clickable slide 2</span>
</a>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="http://thejetsettraveller.com/wp-content/uploads/2015/06/The-Jetset-Traveller-slider-image-1.jpg" />
<div class="captions">This is custom text slide 3</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="http://www.totaleclipselimousine.ca/wp-content/uploads/2016/01/slider-21.jpg" />
<div class="captions">This is custom text slide 4</div>
</div>
<div class="jR3DCarouselCustomSlide">
<img src="http://thejetsettraveller.com/wp-content/uploads/2015/06/The-Jetset-Traveller-slider-image-1.jpg" />
<div class="captions">This is custom text slide 5</div>
</div>
</div>
<br /> <br />
<br /> <br />
</div>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background: darkcyan;
text-align: center;
overflow-x: hidden;
}
.jR3DCarouselGallery,.jR3DCarouselGalleryCustomeTemplate {
margin: 0 auto; /* optional - if want to center align */
}
.jR3DCarouselGalleryCustomeTemplate .captions{
position: relative;
padding: 4px 0;
bottom: 27px;
background: #ec1c8e;
display:block
}
.jR3DCarouselGalleryCustomeTemplate a{
text-decoration: none;
}
$(document).ready(function(){
var slideImages = [ {src: 'http://thejetsettraveller.com/wp-content/uploads/2015/06/The-Jetset-Traveller-slider-image-2.jpg'},
{src: 'http://www.smartholidayshop.com/blog/wp-content/uploads/2017/05/Dune-Bashing.jpg'},
{src: 'http://thejetsettraveller.com/wp-content/uploads/2015/06/The-Jetset-Traveller-slider-image-1.jpg'},
{src: 'http://www.totaleclipselimousine.ca/wp-content/uploads/2016/01/slider-21.jpg'},
{src: 'http://thejetsettraveller.com/wp-content/uploads/2015/06/The-Jetset-Traveller-slider-image-1.jpg'} ]
//var jR3DCarousel;
jR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
width: 470, /* largest allowed width */
height: 272, /* largest allowed height */
slides: slideImages /* array of images source */
});
var carouselCustomeTemplateProps = {
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: 1900,
animationInterval: 2000,
slideClass: 'jR3DCarouselCustomSlide',
autoplay: false,
controls: true, /* control buttons */
navigation: '' /* circles | squares | '' */,
perspective: 2200,
rotationDirection: 'ltr',
onSlideShow: slideShownCallback
}
function slideShownCallback($slide){
console.log("Slide shown: ", $slide.find('img').attr('src'))
}
jR3DCarouselCustomeTemplate = $('.jR3DCarouselGalleryCustomeTemplate').jR3DCarousel(carouselCustomeTemplateProps);
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/v1.0.4/dist/jR3DCarousel.min.js"></script>