JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<script src="http://ruseller.com/lessons/les273/example/js/jquery-1.2.1.pack.js"></script>
<script src="http://ruseller.com/lessons/les273/example/js/jquery-easing.1.2.pack.js"></script>
<script src="http://ruseller.com/lessons/les273/example/js/jquery-easing-compatibility.1.2.pack.js"></script>
<script src="http://ruseller.com/lessons/les273/example/js/coda-slider.1.1.1.pack.js"></script>
<div class="slider-wrap">
<div id="slider1" class="csw">
    <div class="panelContainer">		
        
        <div class="panel" title="FIRST">
            <div class="wrapper">
                <div style="width: 200px; height: 100px; background-color: gray;"></div>
            </div>
        </div>
        
        <div class="panel" title="SECOND">
            <div class="wrapper">
                <div style="width: 200px; height: 100px; background-color: red;"></div>
            </div>
        </div>		
        
        <div class="panel" title="THIRD">
            <div class="wrapper">
                <div style="width: 200px; height: 100px; background-color: blue;"></div>
            </div>
        </div>
        
        <div class="panel" title="FOURTH">
            <div class="wrapper">
                <div style="width: 200px; height: 100px; background-color: green;"></div>
            </div>
        </div>
    
    </div>
</div>
</div>

<table>
<tr class="tr1">
<td colspan="2" style="padding:10px 10px 10px 3px">
    <p><strong>How long have you been a customer of the Bank?</strong></br>
        <label><input type="radio" id="1" name="form_radio_when" value="1" /></label>
            <label for="1">more than a year</label><br>
        <label><input type="radio" id="2" name="form_radio_when" value="2" /></label>
            <label for="2">from six months to a year</label><br>
        <label><input type="radio" id="3" name="form_radio_when" value="3" /></label>
            <label for="3">less than six months</label><br>
        <label><input type="radio" id="4"...

CSS

.slider-wrap { 
			position: relative;
			width: 100%;
			text-align: centre;
			margin: auto 0px;
		}

		.stripViewer { 
			position: relative;
			overflow: hidden; 
			margin: auto;
			width: 300px; 
			height: 300px;
			clear: both;
			background: #fff;
		}
		
		.stripViewer .panelContainer {
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
		}
		
		.stripViewer .panelContainer .panel { 
			float:left;
			height: 100%;
			position: relative;
			width: 300px; 
		}
		
		.stripViewer .panelContainer .panel .wrapper { 
			padding: 0px;
		}
		
		.stripNav { 
			position: relative;
			width: 100% !important;
			margin: auto 0px;
		}
		
		.stripNav ul { 
			list-style: none;

		}
		
		.stripNav ul li {
			float: left;
			margin-right: 5px; 
			margin-left: 5px; 
		}
		
		.stripNav a { 
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			color: #fff;
			text-decoration: underline;
			display: block;
			padding: 0 10px;
		}
		
		.stripNav li.tab1 a { color: #11568C }
		.stripNav li.tab2 a { color: #11568C }
		.stripNav li.tab3 a { color: #11568C }
		.stripNav li.tab4 a { color: #11568C }
		
		.stripNav li a:hover {
			color: gray;
		}
		
		.stripNav li a.current {
			color: #D12229;
		}
		
		.stripNavL, .stripNavR { 
			position: absolute;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 52px;
			width: 52px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}

JavaScript

jQuery(window).bind("load", function() {
			jQuery("div#slider1").codaSlider({ continuous:true})
			jQuery("div#slider2").codaSlider()
			var autoSlide = setInterval(function(){
				jQuery("#stripNavR0 a").click();
			}, 7000);	
		});