JSFiddle - React, Tailwind, and code Playground

by asifrc

HTML

<div class="slider">
    <div id="slide_1" class="slide" style="background-color:red;"></div>
    <div id="slide_2" class="slide" style="background-color:blue;"></div>
    <div id="slide_3" class="slide" style="background-color:yellow;"></div>
    <div id="slide_4" class="slide" style="background-color:green;"></div>
</div>
  
<a id="toggle" href="javascript:slider.toggle();">Toggle Div Visibility</a>

CSS

.slide {
float: left;
width: 200px;
height: 200px;

}

.slider{
width: 600px;
height: 200px;
}

.sliderHidden
{
    display: none;
}

JavaScript

sliderClass = function(selector, visible) {
    //visible is the number of divs that should be visible at a given time
    this.index = 0;
    this.visible = visible;
    this.selector = '.'+selector;
    this.all = $(this.selector).wrap('<div class="'+selector+'">').detach();
	this.toggle = (function(obj) {
		return function() {
            console.log(obj.selector+' - executing toggle');
            var total =  $(obj.selector).length;
			$(obj.all).each(function(i) {
				var min = obj.index;
				var max = (min + obj.visible)%(total);
                console.log('each: '+i);
                console.log('i:'+i+'; max:'+max+'; min:'+min);
                console.log( (i>=min && i<max) + ' - ' + (i>=min && i<max) );
				if ( (i>=min && i<max) || ( (max<=min) && ( (i<max) || (i>=min) ) ) )
				{
					$(this).removeClass('sliderHidden');
				}
                else
				{
					$(this).addClass('sliderHidden');
				}
			});
            obj.index = (obj.index+1)%total;
		};
	})(this);
    this.toggle();
}

//Initialize new slider
slider = new sliderClass('slide', 3);