JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.jquery.min.js"></script>
<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>
    <nav class="navbar navbar-inverse">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
      </div>
    </nav>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-5">
          <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <!-- Required swiper-lazy class and image source specified in data-src attribute -->
                      <img data-src="http://lorempixel.com/1600/1200/nature/1" class="swiper-lazy">
                      <!-- Preloader image -->
                      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                  </div>
                  <div class="swiper-slide">
                      <img data-src="http://lorempixel.com/1600/1200/nature/2" class="swiper-lazy">
                      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                  </div>
                  <div class="swiper-slide">
                      <img data-src="http://lorempixel.com/1600/1200/nature/3" class="swiper-lazy">
     ...

CSS

.swiper-container {
        width: 100%;
        height: 500px; // Only work if star height eg 500px, but need this container responsive 100% or auto.
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #000;
        
    }
    .swiper-slide img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: absolute;
      left: 50%;
      top: 50%;
    }

JavaScript

var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    // Disable preloading of all images
    preloadImages: false,
    // Enable lazy loading
    lazyLoading: true
});