JSFiddle - React, Tailwind, and code Playground

owl carousel with BS3 responsive images and animated css3 title caption -

by Andrew Pougher

HTML

<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="slider">
  <div class="prodIM" style="background-image:url('http://dummyimage.com/16:9x1080'), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);background-image:url('http://dummyimage.com/16:9x1080'),-moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);background-image:url('http://dummyimage.com/16:9x1080'), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%)">
    <div class="note"><p>Prophy.</div>
   </div>
   
    <div class="prodIM" style="background-image:url('http://placehold.it/400x300/ecde93'), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);background-image:url('http://placehold.it/400x300/ecde93'),-moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);background-image:url('http://placehold.it/400x300/ecde93'), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%)">
    <div class="note"><p>purr.</div>
   </div>
  
    <div class="prodIM" style="background-image:url('http://placekitten.com/200/300'), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);background-image:url('http://placekitten.com/200/300'),-moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1)...

CSS

body{background:#ececec}
#slider {
  margin: 10px 0;
  width: 100%;
}

 #slider div.prodIM { max-height: 300px;min-height: 300px;
   background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;}

#slider .owl-item {
  position: relative;
}

#slider .owl-item img {
  display: block;
}

#slider .owl-item.current .note {
  opacity: .78;
  display: block;
  width: 100%;
  transition-timing-function: ease-in-out;
  transition-duration: 1600ms;
}

#slider .owl-item .note {
  z-index: 9999;
  opacity: 0;
  position: absolute;
  width: 100px;
  height: 50px;
  padding: 20px;
  background-color: #000;
}

#slider .owl-item .note h1 {
  color: #a08e5c;
}

#slider .owl-item .note p {
  color: white;
  font-size: 24px;
}

JavaScript

$(document).ready(function() {

  $('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel', function(e) {
    if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return;
    $("#test").html(e.relatedTarget.current())
    var current = e.relatedTarget.current()
    var items = $(this).find('.owl-stage').children()
    var add = e.type == 'changed' || e.type == 'initialized'

    items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add)
  }).owlCarousel({
    autoplay: true,
    autoplayTimeout: 1600,
    autoplayHoverPause: true,
    items: 1,
    nav: true,
    loop: true,
    autoHeight: true,
    autoHeightClass: 'owl-height'
  });
})