JSFiddle - React, Tailwind, and code Playground

by kubedan

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div class="wrap">
  <div class="slideshow">
    <div class="item">
      <div class="itemInner">
        <div class="top">First top</div>
        <div class="middle">
          <div class="left">First left</div> 
          <div class="right">First right</div>
        </div>
        <div class="bottom">First bottom</div>
          
      </div>
    </div>
    <div class="item">
      <div class="itemInner">
        <div class="top">Second top</div>
        <div class="middle">
          <div class="left">Second left</div> 
          <div class="right">Second right</div>
        </div>
        <div class="bottom">Second bottom</div>
      </div>
    </div>
    <div class="item"> 
      <div class="itemInner">
        <div class="top">Third top</div>
        <div class="middle">
          <div class="left">Third left</div> 
          <div class="right">Third right</div>
        </div>
        <div class="bottom">Third bottom</div>
      </div>
    </div>
  </div>
</div>

<span class="prev">Prev</span> 
<span class="next">Next</span>

CSS

.slideshow {
    text-align:center;
    margin: 0px auto;
    width:100%;
    height:100px;
}
.item {
    text-align:center;   
    width:100%;
}
.itemInner{
    text-align:center;
    width:202px;
    margin:auto;
}
.top {
    text-align:center;
    width:200px;
    border:1px solid blue;
    margin:auto;   
}
.left,.right {
    float:left;
    width:99px;
    border:1px solid red;
}
.middle{
    width:202px;
    margin:auto;    
}
.bottom {
    clear:both;
    border:1px solid green;  
}
.prev, .next{
    cursor:pointer;
}

JavaScript

(function($) {
$.fn.cycle.transitions.scrollHorzCustom = function($cont, $slides, opts) {
    $cont.css('overflow','hidden').width();
    opts.before.push(function(curr, next, opts, fwd) {
        if (opts.rev) {
            fwd = !fwd;
        }
        $.fn.cycle.commonReset(curr,next,opts);
        opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
        opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
    });
    opts.cssFirst = { left: 0 };
    opts.cssBefore= { top: 0 };
    opts.animIn   = { left: 0 };
    opts.animOut  = { top: 0 };
};
})(jQuery);


$(".slideshow").cycle({
    fx: "scrollHorzCustom",
    containerResize: 0,
    width: "100%",
    prev:   '.prev',
    next:   '.next'
});