JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://visuals.motocom.co.uk/bootstrap-v4/assets/scripts/vendor/snap.js"></script>
<div class="drawers">
  <div class="drawer drawer-left">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nisl eget leo interdum vulputate at id nunc. Aliquam maximus metus quis diam laoreet vehicula. Suspendisse nec nisi ut sem consequat auctor id id tellus. Praesent varius in metus ac porttitor. Praesent ut augue eu felis rhoncus consectetur. Suspendisse pulvinar facilisis nibh sit amet convallis. Etiam rhoncus, nunc at volutpat pellentesque, mauris diam lobortis ligula, sed condimentum dolor sem eget libero. Nulla dignissim, velit vitae bibendum sodales, leo diam ullamcorper augue, at viverra orci dolor id diam. Suspendisse congue enim nec blandit porta.

  </div>
  <div class="drawer drawer-right"></div>
</div>

<div id="content" class="content">

  <div class="container">
  
    <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>

<p class="lead">The problem is that I am using <a href="http://kenwheeler.github.io/slick/" target="_blank">Ken Wheelers Slick Slider</a> inconjunction with <a href="http://jakiestfu.github.io/Snap.js/demo/apps/default.html" target="_blank">Jakie Stfu Snap.js</a></p>

<p...

SCSS

/* bootstrap vendors
-------------------------------------------------- */

// core variables and mixins
@import "https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.min.css";


/* test
-------------------------------------------------- */

HTML,
BODY {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0275d8;

}

.drawers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;

  .drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 250px;
    height: 100%;
    overflow-y: scroll;
    color: #ffffff;
    @include transition-property(top, bottom);
    @include transition-duration(.2s, .2s);
    @include transition-timing-function(linear, linear);
    -webkit-overflow-scrolling: touch;
    padding: 30px;

    &.drawer-left {
      left: 0;

    }

    &.drawer-right {
      right: 0;
      display: none;

    }

  }

}

#content {
  padding: 20px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 2;
  background: #ffffff;
  overflow: auto;
  @include transition-property(top, bottom);
  @include transition-duration(.2s, .2s);
  @include transition-timing-function(linear, linear);
  -webkit-overflow-scrolling: touch;

  .snapjs-left & {
       
      &:after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #ffffff;
        opacity: 0;
        cursor: move;
        cursor: grab;
        cursor: -webkit-grab;
        cursor: -moz-grab;

      }
    
   }
  
}

JavaScript

var addEvent = function addEvent(element, eventName, func) {
    if (element.addEventListener) {
        return element.addEventListener(eventName, func, false);
    } else if (element.attachEvent) {
        return element.attachEvent("on" + eventName, func);
    }
};

var snapper = new Snap({
    element: document.getElementById('content'),
    disable: 'right',
    maxPosition: 250,
    minPosition: -250,
    transitionSpeed: .2
});

addEvent(document.getElementById('ol'), 'click', function(){
    snapper.open('left');
});