JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.video.min.js"></script>
<div class="slideshow cycle-slideshow"
data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    data-cycle-prev=#prev
    data-cycle-next=#next
    data-cycle-auto-height="640:360"
    data-cycle-slides=">a"
    data-cycle-youtube=true
    data-cycle-youtube-autostart=true
>
      <a href="http://www.youtube.com/v/boi9_JIEe-Y?hl=en_US&amp;version=3&amp;rel=0" >1</a>
      <a href="http://www.youtube.com/v/srKLoOBqt0w?version=3&amp;hl=en_US&amp;rel=0" >2</a>
      <a href="http://www.youtube.com/v/NLdXk21ZaYw?hl=en_US&amp;version=3&amp;rel=0" >3</a>
      <a href="http://www.youtube.com/v/KPOvBPRYkts?hl=en_US&amp;version=3&amp;rel=0" >4</a>    
     </div>
<a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a>

CSS

.cycle-slideshow {
max-width: 640px;
margin: auto;
}

.cycle-slideshow > div {
width: 100%;
height: 100%;
}