JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://coolcarousels.frebsite.nl/js/jquery.carouFredSel.js"></script>
<script src="http://cdn.oomta.com/js/jquery/touchswipe/1.3.3/jquery.touchSwipe.min.js"></script>
<div class="wrapper">         
              <ul id="foo2">
                   <li><img src="http://placehold.it/100x100" alt="" /></li>               
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
                  <li><img src="http://placehold.it/100x100" alt="" /></li>  
              </ul>
               <a id="prev2" class="prev" href="#">&lt;</a>
               <a id="next2" class="next" href="#">&gt;</a>
 </div>         

       <input type="button" id="hide" value="hide" />
       <input type="button" id="show" value="show" />

CSS

.wrapper{height: 100px;position: relative;background-color: white;margin: 10px auto;padding: 50px;box-shadow: 0 0 5px #999;display:none;}
.clearfix {float: none;clear: both;}
.prev {position: absolute;z-index: 9;top: 50%;left:10px;}
.next {position: absolute;z-index: 9;top: 50%;right:10px;}
#foo2{margin:0;padding:0;}
#foo2 li {display: block;float: left;height: 100px;text-align: center;width: 100px;
color: #8cabbf;display: block;font: 700 10px/10px Arial;text-decoration: none;}

#foo2 li  img {border: 1px solid #dfe9ee;}

JavaScript

$(document).ready(function() {
        					generateCarousel();
                 $('#show').click(function() {
                      $(".wrapper").animate( { "opacity": "show"} , 1000 );
                     //generateCarousel();
                 });
                 $('#hide').click(function() {
                      $(".wrapper").animate( { "opacity": "hide"} , 1000 );
                 });            
                function generateCarousel() {
                //  Scrolled by user interaction
                $('#foo2').carouFredSel({
                    auto        : false,
                    responsive  : false,
                    items : {
                        visible:3,
                        width: 100
                    },              
                    width: 600,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: "#pager2",
                    swipe: {
                        onMouse: true,
                        onTouch: true
                    }
                });             
            }
            });