JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/2.7.5/idangerous.swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/2.7.5/idangerous.swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
      <!--First Slide-->
      <div id="slide-0" class="swiper-slide">
          <img src="http://static.squarespace.com/static/511a8e05e4b0d075328b6224/t/5337342ee4b07691c1908273/1396126766794/batch%20logo%20small%20jpg.jpg">
          <button data-target="0"><i class="fa fa-beer"></i><br />Whats On Tap?</button>
          <button data-target="1"><i class="fa fa-map-marker"></i><br />Find Us</button>
          <button data-target="2"><i class="fa fa-phone"></i><br />Call Us</button>
          <button data-target="3"><i class="fa fa-cog"></i><br />Settings</button>
      </div>
      <div id="slide-1" class="swiper-slide">
          <ul id="brewlist"></ul>
      </div>
      <!--Second Slide-->
      <div id="slide-2" class="swiper-slide">
          <button data-target="0"><i class="fa fa-undo"></i></button>
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11798.633078843204!2d-83.062905!3d42.328487!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7bda3b2cb463bd80!2sBatch+Brewing+Company!5e0!3m2!1sen!2sil!4v1422556845654" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
      </div>
      
      <!--Third Slide-->
      <div id="slide-3" class="swiper-slide"> 
        <!-- Any HTML content of the third slide goes here -->
      </div>
      <!--Etc..-->
  </div>
</div>

SCSS

.swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

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

img {
    max-width: 100%;
    height: auto;
}

#slide-1 {
    img {
        max-height: 50%;
        margin: 0 auto;
        display: block;
    }
    button {
        width: 50%;
        height: 25%;
        padding:0;
        margin:0;
        float:left;
        font-size: 1.5em;
    }
    i {
        font-size: 2.5em;
    }

}
#slide-2 {
    button {
        
        width: 3%;
        position: absolute;
        top: 1%;
        bottom: 1%;
        z-index: 9999;
    }
    i { max-height: 5%; }
    iframe { z-index: 1; }
}
#slide-3 {  }

JavaScript

//https://docs.google.com/spreadsheets/d/1bnIENIbflrH-KvMfwYLPlRk59z_PdIJm0Xa-3YyPdD0/pubhtml?gid=0&single=true

var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1bnIENIbflrH-KvMfwYLPlRk59z_PdIJm0Xa-3YyPdD0/pubhtml?gid=0&single=true';


$(function(){
    
  //Load the external data
    var tabletop = Tabletop.init( { 
        key: public_spreadsheet_url, 
        callback: showInfo } );

    function showInfo(data) {

        $.each( tabletop.sheets("Sheet1").all(), function(i, brew) {
          var brew_li = $('<li><h4>' + brew.name + '</h4></li>')
          brew_li.append();
          brew_li.append("<p>" + brew.description + "</p>");
          brew_li.appendTo("#brewlist");
        })
        
    }    

    
  //Initialize the main swiper  
  var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal',
    loop: false,
    swipeToNext: false,
    swipeToPrev: false  
  });

  //Process the main button clicks to swipe to page.
   $('button').click(function(){
       mySwiper.swipeTo($(this).data('target'));
   });
   
    
    
    
})