JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div id="slider_1113" class="adSlider">
      <div class="adSliderWrap">

        <ul class="adSlider">
          <li class="adSlider">
              <a class="adSlider" href="http://www.google.com" target="_blank" title="Test 1"><img style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test 1" /></a>
          </li>
          <li class="adSlider">
              <img class="adSlider" style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test 2" />
          </li>
          <li class="adSlider">
              <a class="adSlider" href="http://www.zomgmo.com" target="_blank" title="Test3"><img style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test3" /></a>

          </li>
          <li class="adSlider">
              <img class="adSlider" style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test 4" />
          </li>
          <li class="adSlider">
              <img class="adSlider" style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test 5" />
          </li>
          <li class="adSlider">
              <img class="adSlider" style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test 6" />

          </li>
          <li class="adSlider">
              <img class="adSlider" style="height:100px; width:px;" src="http://www.dummyimage.com/133x100" alt="Test 7" />
          </li>
        </ul>
      </div>
    </div>

CSS

div.adSlider{
  overflow:hidden;
}
ul.adSlider{
  list-style: none outside none;
  margin: 0;
  padding: 0;
}
li.adSlider{
  float: left;
}
li.adSlider a{
  display: block;
}
li.adSlider img{
  display: block;
}
li.adSlider a img{
  display: block;
}

JavaScript

(function( $ ){

  var adSlider = function(ele, options){

      var settings = $.extend({}, $.fn.adSlider.defaults, options);

      var vars = {
          wrap: null,
          height: 0,
          width: 0,
          amt: 0,
          totalWidth: 0,
          trueWidth: 0,
          margin: 0
      };
      
      var trace = function(msg){
          if (this.console && typeof console.log != "undefined")
              console.log(msg);
      }
      
      vars.wrap = $(ele).find(".adSliderWrap");
      
      var slide = function(){
          if(vars.margin >= vars.totalWidth - vars.width)
              vars.margin = 0;
          vars.wrap.stop(true,true).css({"margin-left":-vars.margin});
          vars.margin = Math.min((vars.margin + vars.width),(vars.totalWidth - vars.width));
          vars.wrap.stop(true,true).animate({"margin-left": -vars.margin},(1/settings.speed * 1000),"linear",function(){slide();});
      }
      
      $(ele).find("img").each(function(i,l){
          if($(l).outerWidth()>vars.width)
              vars.width = $(l).outerWidth();
          vars.totalWidth += $(l).outerWidth();
          if($(l).outerHeight()>vars.height)
              vars.height = $(l).outerHeight();
          vars.amt++;
      });
      
      $(ele).find("ul").append($(ele).find("li").first());
      $(ele).width(vars.width);
      vars.trueWidth = (vars.totalWidth + $(ele).find("li").first().outerWidth());
      vars.wrap.width(vars.trueWidth);
      
      slide();
      
      settings.afterLoad.call(this);
      
      return this;
  };
  
  $.fn.adSlider = function(options) {
        
      return this.each(function(key, value){
          var element = $(this);
          // Return early if this element already has a plugin instance
          if (element.data('adslider')) return element.data('adslider');
          // Pass options to plugin constructor
          var adslider = new adSlider(this, options);
          // Store plugin object in this element's...