JSFiddle - React, Tailwind, and code Playground

by sharzy

HTML

<!--
  jQuery library
-->
<script src="http://creativescripters.com/category/js/jquery.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="http://creativescripters.com/category/js/jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="http://creativescripters.com/category/js/skin.css" />
<div id="wrap">


  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img title="test55555" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img title="tes44444" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img title="test33" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img  title="test33"  title="test2" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img  title="test33"  src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img  title="test33"  src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img  title="test33"  src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>

    <li><img  title="test33"  src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img  title="test33"  src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img  title="test33"  src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

</div>

JavaScript

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular'
    });

    jQuery("#mycarousel li img[title]").tooltip();
    });