JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="slider" class="col-md-12 productimage">


  <div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
      <div data-slide-number="0" class="item fancybox">
        <img class="img-responsive" src="https://via.placeholder.com/500"></div>
      <div data-slide-number="1" class="item  fancybox">
        <img class="img-responsive" src="https://via.placeholder.com/500"></div>
      <div data-slide-number="2" class="item  fancybox">
        <img class="img-responsive" src="https://via.placeholder.com/500"></div>
      <div data-slide-number="3" class="item  fancybox active left">
        <img class="img-responsive" src="https://via.placeholder.com/500"></div>
      
    </div>

  </div>

  <div class="bottom">
    <a data-slide="prev" role="button" href="#myCarousel" class="left carousel-control">
      <span class="fa fa fa-angle-double-left"></span>
    </a>
    <div id="zooming">
      Click Image to Zoom
    </div>
    <a data-slide="next" role="button" href="#myCarousel" class="right carousel-control">
      <span class="fa fa-angle-double-right"></span>
    </a>
  </div>

</div>


<!-- Modal -->
<div class="modal fade modal-gallery" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
     
      <div class="modal-body">
        <!-- Change image source for large popup-->
        <img src="..." class="img-responsive" alt="Responsive image">
      </div>

    </div>
  </div>
</div>

CSS

.bottom {
  margin-top: 100px;
  text-align: center;

}
.modal-gallery {}

.modal-gallery .modal-dialog {
    width: auto;
    display: table;
}
.modal-gallery .modal-body {
    padding: 0;
}

JavaScript

$(document).ready(function($) {
   $('#myCarousel').carousel({
     interval: 5000
   });
   $('.carousel-control.left').click(function() {
     $('#myCarousel').carousel('prev');
   });

   $('.carousel-control.right').click(function() {
     $('#myCarousel').carousel('next');
   });
   $('#carousel-text').html($('#slide-content-0').html());

   $('.fancybox').on('click', function() {
     var img = $(this).find('img');
     $('.img-responsive').attr('src', img.attr('src'));
     $('#myModal').modal('toggle');
   });

 });