JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>
<section class="clearfix">
<div class="container-fluid">
                <div class="row no-gutter">
                    <div class="col-md-4 col-sm-6 slideshow-block">
                    <a href="#" class="link"></a>
                    <ul class="slides">
                                              <li><img class="img-responsive" src="http://s18.postimg.org/90m9s95d5/image2.jpg" alt="img4"></li>
                        <li><img class="img-responsive" src="http://www.360training.co.uk/assets/Uploads/web-reputation2.jpg" alt="img5"></li>
                          <li><img class="img-responsive" src="http://s18.postimg.org/90m9s95d5/image2.jpg" alt="img2"></li>
                                             <li><img class="img-responsive" src="http://www.360training.co.uk/assets/Uploads/web-reputation2.jpg" alt="img1"></li>
                        <li><img class="img-responsive" src="http://s18.postimg.org/90m9s95d5/image2.jpg" alt="img2"></li>
 
                    </ul>
                    </div>
                      <div class="col-md-4 col-sm-6 slideshow-block">
                    <a href="#" class="link"></a>
                    <ul class="slides">
                                              <li><img class="img-responsive" src="http://s18.postimg.org/90m9s95d5/image2.jpg" alt="img4"></li>
                        <li><img class="img-responsive" src="http://www.360training.co.uk/assets/Uploads/web-reputation2.jpg" alt="img5"></li>
                          <li><img class="img-responsive" src="http://s18.postimg.org/90m9s95d5/image2.jpg" alt="img2"></li>
                                             <li><img class="img-responsive"...

CSS

.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}
img {
      max-width:100%;
      height:auto !important;
}
.slideshow-block{
    position: relative;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}
.slideshow-block img{
    cursor: pointer;
}
a.link{
    position:absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 10;
}
.slides{
    z-index:0;
    list-style: none;
    margin-bottom: 0;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}
.slides.active{
    visibility:visible;
}

JavaScript

$(document).ready(function(){
  $('.slides').cycle({
      fx:    'fade', 
      speed:   100,
      timeout:  2000 
      }).cycle("pause");
      // Pause & play on hover
      $('.slideshow-block').hover(function(){
          $(this).find('.slides').addClass('active').cycle('resume');
      }, function(){
          $(this).find('.slides').removeClass('active').cycle('pause');
  });
  });