JSFiddle - React, Tailwind, and code Playground

by deadendstreet

HTML

<script src="http://idangero.us/swiper/dist/js/swiper.min.js"></script>
<link rel="stylesheet" href="http://idangero.us/swiper/dist/css/swiper.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div id="featured-boxes">
        <a class="fb-title" onclick="window.open('http://www.kacvfm.org', '_blank'); return false;">
          <div class="title-top">
            <span class="fb-header"></span> SHOWS </div>
      </div>

      <img width="400" height="225" src="http://pbs.bento.storage.s3.amazonaws.com/hostedbento-prod/filer_public/News/Chip%20Blogs/OddFellas030218.jpg" class="attachment-small size-small" alt="Eight One Sixty" srcset="http://pbs.bento.storage.s3.amazonaws.com/hostedbento-prod/filer_public/News/Chip%20Blogs/OddFellas030218.jpg"
        sizes="(max-width: 400px) 100vw, 400px" /></a>
    </div>
    <div class="swiper-slide">
      <div id="featured-boxes">
        <a class="fb-title" onclick="window.open('http://www.kacvfm.org', '_blank'); return false;">
          <div class="title-top">
            <span class="fb-header"></span> FM90 EVENTS </div>
      </div>

      <img width="400" height="225" src="http://pbs.bento.storage.s3.amazonaws.com/hostedbento-prod/filer_public/News/Chip%20Blogs/RedSparrowA.jpg" class="attachment-small size-small" alt="Eight One Sixty" srcset="http://pbs.bento.storage.s3.amazonaws.com/hostedbento-prod/filer_public/News/Chip%20Blogs/RedSparrowA.jpg"
        sizes="(max-width: 400px) 100vw, 400px" /></div>
    <div class="swiper-slide">
      <div id="featured-boxes">
        <a class="fb-title" onclick="window.open('http://www.kacvfm.org', '_blank'); return false;">
          <div class="title-top">
            <span class="fb-header"></span> BLOGS AND PODCASTS </div>
      </div>

      <img width="400" height="225"...

CSS

.swiper-container {
      width: 100%;
      height: 225px;
      top: 55%;
      position: fixed;
    }

    .swiper-slide img {
      width: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      width: 38%%;
      height: auto;
      margin: 25px 0px;
      border-color: #FFF;
      border-size: 2px;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    media (max-width: 991px) #featured-boxes .title-top,
    #featured-boxes .title-bottom {
      opacity: 0.85;
      font-size: 20px;
      letter-spacing: 0px;
      margin-top: -25px;
    }

    #featured-boxes .title-top,
    #featured-boxes .title-bottom {
      background: rgba(0, 0, 0, 0.48);
      width: 100%;
      position: absolute;
      padding: 10px 30px 10px;
      color: white;
      font-size: 22px;
      letter-spacing: -1px;
      text-align: left;
      /* margin-top: -36px; */
      line-height: 22px;
      bottom: 0px;
      height: auto;
      z-index: 1;
    }

    img .swiper-slide:hover {
      transform: scale(1.03);
    }

JavaScript

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  slidesPerGroup: 4,
  loopedSlides: 4,
  centeredSlides: false,
  spaceBetween: 0,
  grabCursor: true,
  loop: false,
  pagination: '.swiper-pagination',
  paginationClickable: true,
  breakpoints: {
    1200: {
      slidesPerView: 4,
      loopedSlides: 4,
      spaceBetween: 10
    },
    1024: {
      slidesPerView: 3,
      loopedSlides: 3,
      spaceBetween: 10
    },
    768: {
      slidesPerView: 2,
      loopedSlides: 2,
      spaceBetween: 10
    },
    675: {
      slidesPerView: 1,
      loopedSlides: 1,
      spaceBetween: 20
    }
  }
});



document.querySelector('.prepend-2-slides').addEventListener('click', function(e) {
  e.preventDefault();
  swiper.prependSlide([
    '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
    '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
  ]);
});
document.querySelector('.prepend-slide').addEventListener('click', function(e) {
  e.preventDefault();
  swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
});
document.querySelector('.append-slide').addEventListener('click', function(e) {
  e.preventDefault();
  swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
});
document.querySelector('.append-2-slides').addEventListener('click', function(e) {
  e.preventDefault();
  swiper.appendSlide([
    '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
    '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
  ]);
});