Swiper Highlights

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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="highlights">
  <div class="fb-swipe-left"></div>
  <div id="swiper-featured" class="swiper-container">
    <div class="swiper-wrapper">

      <div class="swiper-slide">
        <a class="fb-title" href="">
          <div class="title-top">
            <span class="fb-header"></span>
            Latest News                     </div>
          <div class="fb-zoom">
            <img width="400" height="225" src="http://www.trbimg.com/img-53b31cf3/turbine/la-et-ms-ryan-adams-announces-new-album-20140701" class="attachment-small" alt="Middle of the Map" />                      </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a class="fb-title" onclick="window.open('http://www.vuhaus.com/artists/m-ward', '_blank'); return false;">
          <div class="title-top">

            Yellow City Sounds Live                </div>
          <div class="fb-zoom">
            <img width="400" height="225" src="http://ww2.kqed.org/arts/wp-content/uploads/sites/2/2015/05/SpoonMain.jpg" class="attachment-small" alt="M. Ward" />                      </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a class="fb-title" href="">
          <div class="title-top">
            Listen Now                   </div>
          <div class="fb-zoom">
            <img width="400" height="225" src="http://bcheights.com/wp-content/uploads/2015/09/folds-2.jpg" class="attachment-small" alt="Dylan LeBlanc In-studio FTR" />                      </div>
        </a>
      </div>
      <div class="swiper-slide">
        <a class="fb-title" href="">
          <div class="title-top">
            Listen Now                   </div>
          <div class="fb-zoom">
            <img width="400"...

CSS

#highlights {
    width: 100%;
    background: rgba(0, 0, 0, 0.89);
    overflow: hidden;
    }
    #featured-boxes-light {
    width: 100%;
    background: rgba(255, 255, 255, 0.03)
    }
    #highlights .swiper-slide {
    position: relative;
    cursor: pointer; 
    }
    #highlights .title-top, #featured-boxes .title-bottom {
    background: rgba(0, 0, 0, 0.48);
    width: 100%;
    position: absolute;
    padding: 10px 20px 10px;
    color: white;
    font-size: 22px;
    text-align: left;
    /* margin-top: -36px; */
    left: 0%;
    /* margin-left: -35%; */
    line-height: 22px;
    bottom: 0px;
    height: auto;
    z-index: 1;
    }
    .fb-header {
    display: block;
    font-size: 16px;
    color: rgb(255, 0, 0);
    font-weight: 600;
    letter-spacing: 2px;
    text-shadow: 0px 0px 3px black;
    opacity: .9;
    width: 25%;
    }
    .fb-title .title-top:hover {
    opacity: .8 !important;
    }
    .fb-zoom {
    max-width: 350px;
    width: 100%;
    height: 200px;
    overflow: hidden;
    }
    .fb-zoom img {
    max-width: 350px;
    width: 100%;
    height: auto;
    }
    .fb-swipe-left, .fb-swipe-right {
    height: 195px;
    width: 40px;
    position: absolute;
    top: 0px;
    z-index: 999;
    background-size: contain !important;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    cursor: pointer;
    }
    .fb-swipe-left:hover, .fb-swipe-right:hover {
    background-color: rgba(255, 255, 255, 0.33);
    }
    .fb-swipe-left {
    background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25);
    left: -40px;
    }
    .fb-swipe-left.fb-hovered {
    left: 0;
    }
    .fb-swipe-right {
    background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25);
    right:...

JavaScript

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 0,


    });