JSFiddle - React, Tailwind, and code Playground

by Riderman Sousa

HTML

<script src="http://coffeescripter.com/code/ad-gallery/jquery.ad-gallery.js"></script>
<link rel="stylesheet" href="http://coffeescripter.com/code/ad-gallery/jquery.ad-gallery.css">
<div class="ad-gallery">
    <div class="ad-image-wrapper">
  </div>
  <div class="ad-controls">
  </div>
      <div class="ad-nav">
    <div class="ad-thumbs">
      <ul class="ad-thumb-list">
          
          
        <li>
          <a href="images/2.jpg">
            <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Image-GIF-icon.png" longdesc="http://www.example.com" alt="Description of the image 2.jpg">
          </a>
        </li>
          
        <li>
          <a href="images/1.jpg">
            <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Image-BMP-icon.png" title="Title for 1.jpg">
          </a>
        </li>
          
          
        <li>
          <a href="images/1.jpg">
            <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Image-JPEG-icon.png" title="Title for 1.jpg">
          </a>
        </li>
          
        <li>
          <a href="images/1.jpg">
            <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Image-PNG-icon.png" title="Title for 1.jpg">
          </a>
        </li>
          
        <li>
          <a href="images/1.jpg">
            <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Image-TIFF-icon.png" title="Title for 1.jpg">
          </a>
        </li>
                 
          
          
      </ul>
    </div>
</div>
</div>

CSS

.ad-image-wrapper, .ad-controls
{
    display:none;
}

JavaScript

var galleries = $('.ad-gallery').adGallery({width: 100,height:70, effect: 'slide-hori'})