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(){
          vars.wrap.html("<marquee>"+vars.wrap.html()+"</marquee>");
      }
      
 
      
      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 data
          element.data('adslider', adslider);
      });

    };
  
  $.fn.adSlider.defaults = {
            speed: 2,
            afterLoad: function(){}
        };
})( jQuery );

$("#slider_1113").adSlider({
        speed: 2
});