JSFiddle - React, Tailwind, and code Playground

by Glenn Marks

HTML

<div class="G4LSlider">
    <div><a href="/1" title="View These Products"><img src="//www.garden4less.co.uk/brands/slider-images/bosch-rotak-mower.jpg" alt="Product Image"/></a></div>
</div>

<div class="G4LSliider" style="display:none">
    <div><a href="/1" title="View These Products"><img src="//www.garden4less.co.uk/brands/slider-images/bosch-rotak-mower.jpg" alt="Product Image"/></a>

    </div>
    <div><a href="/2" title="View These Products"><img src="//www.garden4less.co.uk/brands/slider-images/bosch-axt-shredder.jpg" alt="Product Image"/></a>

    </div>
    <div><a href="/1" title="View These Products"><img src="//www.garden4less.co.uk/brands/slider-images/bosch-rotak-mower.jpg" alt="Product Image"/></a>

    </div>
    <div><a href="/2" title="View These Products"><img src="//www.garden4less.co.uk/brands/slider-images/bosch-axt-shredder.jpg" alt="Product Image"/></a>

    </div>
</div>
<br>
<br>
<p>Touch Events - http://www.javascriptkit.com/javatutors/touchevents.shtml</p>
<p>Slider Source - http://slidesjs.com/</p>

CSS

body>div {
    max-width:300px;
    border:1px solid #E7E7E7;
    overflow:hidden;
    position:relative
}
div.G4LSlider>div.G4LSlide {
    position: absolute;
    /*left: 0;
    top: 0;*/
    width:100%
}
div.G4LSlide a img {
    display:block
}
div a img {
    width:100%
}
.Sprite {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background: url('//www.garden4less.co.uk/images/G4L-Sprite.png') no-repeat;
}
.G4LSliderPrev, .G4LSliderNext {
    position:absolute;
    top:50%;
    margin-top:-26px
}
.G4LSliderPrev {
    width:26px;
    height:52px;
    background-position:0 -100px
}
.G4LSliderPrev:hover {
    background-position:0 -157px
}
.G4LSliderNext {
    width:26px;
    height:52px;
    right:0;
    background-position:-35px -100px
}
.G4LSliderNext:hover {
    background-position:-35px -157px
}
.G4LSliderIcon {
    margin:10px;
    height:12px;
    width:12px;
    background-position:-89px -110px
}
.G4LSliderIcon:hover, .G4LSliderIcon.G4LSliderIconSelected {
    background-position:-72px -110px
}
.G4LSliderIcons {
    width:100%;
    bottom:0;
    text-align:center;
    position:absolute
}

JavaScript

!function (e) {
  e.fn.G4LSlider = function (options, duration, direction, timelapse) {
    var b = e(this),
        IntervalID;
    b.children().addClass("G4LSlide");
    var NumberOfSlides = (b.children().length) - 1,
        SliderSettings = e.extend({
          SliderDuration: (duration ? duration : 400),
          SliderDirection: (direction ? direction : "right"),
          SliderTimer: (timelapse ? timelapse : 8000),
          PrevButtonClass: "G4LSliderPrev Sprite",
          NextButtonClass: "G4LSliderNext Sprite",
          IconGroupClass: "G4LSliderIcons",
          IconButtonClass: "G4LSliderIcon Sprite",
          IconButtonSelectedClass: "G4LSliderIconSelected",
          HideNextPrev: true,
          BindHieghtChangeTo: ".G4LBindHeightChange",
          SlideToShow: 0
        }, options),
        SliderDuration = SliderSettings.SliderDuration,
        SliderDirection = SliderSettings.SliderDirection,
        SliderTimer = SliderSettings.SliderTimer,
        PrevButtonClass = SliderSettings.PrevButtonClass,
        PrevButtonClassRep = PrevButtonClass.replace(" ", "."),
        NextButtonClass = SliderSettings.NextButtonClass,
        NextButtonClassRep = NextButtonClass.replace(" ", "."),
        IconGroupClass = SliderSettings.IconGroupClass,
        IconGroupClassRep = IconGroupClass.replace(" ", "."),
        IconButtonClass = SliderSettings.IconButtonClass,
        IconButtonClassRep = IconButtonClass.replace(" ", "."),
        IconButtonSelectedClass = SliderSettings.IconButtonSelectedClass,
        HideNextPrev = SliderSettings.HideNextPrev,
        BindHieghtChangeTo = SliderSettings.BindHieghtChangeTo,
        SlideToShow = SliderSettings.SlideToShow,
        ReverseSliderDirection=({'left':'right','right':'left','top':'bottom','bottom':'top'})[SliderDirection],
        SliderIsVertical=(SliderDirection=='left'||SliderDirection=='right')?false:true,
        SliderDirection0 = {}, SliderDirectionWidth = {};
    
	if (SlideToShow >...