JSFiddle - React, Tailwind, and code Playground

by alsadi

HTML

<div id="content">
<div id="slides_viewport" onmouseover="slider_active=0" onmouseout="slider_active=1">
<div id="slides" class="ani">
<div id="s1" class="slide">
    This is page one. <a href="http://bcksp.blogspot.com/">Visit my blog</a>
</div>
<div id="s1" class="slide" style="background:#00f;">
This is page two
</div>
<div id="s1" class="slide" style="background:#f00;">
This is page three
</div>
</div>
<div id="slides_buttons"><span id="b1" class="current">1</span> <span id="b2">2</span> <span id="b3">3</span></div>
</div>

CSS

html, body {margin:0; padding:0; background: #000; color:#fff}
 .clear {clear:both; padding-bottom:2px;}
 
 .ani {
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }
 
 #slides_buttons span {
 background: rgba(128,255,128,0.5);
 float:left;
 margin:0 2px;
 padding: 0 0.5em;
 }
 #slides_buttons span.current {
 background: rgba(128, 255,128,1.0);
 }
 
 #slides_viewport {
 position: absolute;
 overflow: hidden;
 width:200px;
 height:200px;
 left:50px;
 top:50px;
 clear:both;
 }
 
 #slides_buttons {
 position:absolute;
 left:0px;
 bottom:0px;
 clear:both;
 }
 
 #slides {
 position:absolute;
 width:600px;
 height:200px;
 left:0;
 top:0;
 }
 
 .slide {
     width:200px;
     height:200px;
     float:left;
     background: #888; /* for non-css3 browsers */
 }

JavaScript

var slide_cur=0, slide_w=200, slide_num=3, slider_active=1;
function slide() {
     if (slider_active!=1) return;
     document.getElementById('b'+(slide_cur+1)).setAttribute('class', '');
     slide_cur=( slide_cur + 1) % slide_num;
     document.getElementById('slides').style.left=(-slide_cur*slide_w)+"px";
     document.getElementById('b'+(slide_cur+1)).setAttribute('class', 'current');
}
setInterval ('slide();', 5000 );