JSFiddle - React, Tailwind, and code Playground

by Anam Ansari

HTML

<h1>iSlider</h1>
		
		
		

		<!-- This is all the XHTML ImageFlow needs -->
		<div id="myImageFlow" class="imageflow">
		
		<div id="id1" alt='div1'class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img1.jpg'); border:solid; border-color: black;">You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal,
		and the text will wrap. See the example below or follow along at home with the demo.You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal,
		and the text will wrap. See the example below or follow along at home with the demo.</div>
		<div id="id2" alt='div2' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img2.jpg'); border:solid; border-color: black;">this is 2</div>
		<div id="id3" alt='div3' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img3.jpg'); border:solid; border-color: black;">this is 3</div>
		<div id="id4" alt='div4' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img4.jpg'); border:solid; border-color: black;">this is 4</div>
		<div id="id5" alt='div5' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden; background-image:url('img/img5.jpg'); border:solid; border-color: black;">this is 5</div>
		<div id="id6" alt='div6' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 6</div>
		<div id="id7" alt='div7' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid;...

CSS

@charset "utf-8";
@media screen, projection {
	body {
  min-width: 600px;      /* 2x LC width + RC width */
}

 .imageflow div{
	cursor:pointer;
	white-space:normal;
	word-wrap: break-word;
	overflow:hidden;
	color:black;
	}

	.imageflow {
		overflow: hidden;
		position: relative;
		text-align: left;
		visibility: hidden;
		width: 85%;
		margin:5px 5px 5px 5%;
		height:80%;
	}
	.hideMe{
		border:2px solid red;
	}
	.t1
	{
	 transform: skewX(5deg) skewY(175deg); /* W3C */
    -webkit-transform: skewX(5deg) skewY(175deg); /* Safari & Chrome */
    -moz-transform: skewX(5deg) skewY(160deg); /* Firefox */
    -ms-transform: skewX(5deg) skewY(175deg); /* Internet Explorer */
    -o-transform: skewX(5deg) skewY(175deg); /* Opera */ 
		}
	
	.t2
	{
	 transform: skewX(-5deg) skewY(15deg); /* W3C */
    -webkit-transform: skewX(-5deg) skewY(10deg); /* Safari & Chrome */
    -moz-transform: skewX(-5deg) skewY(5deg); /* Firefox */
    -ms-transform: skewX(-5deg) skewY(10deg); /* Internet Explorer */
    -o-transform: skewX(-5deg) skewY(10deg); /* Opera */ 
		}
	
	.imageflow img {
		border: none;
		position: absolute;
		top: 0px;
		visibility: hidden;
		-ms-interpolation-mode: bicubic;
	 
	}
	
	.imageflow p {
		margin: 0 auto;
		text-align: center
	}
	.imageflow .loading {
		border: 1px solid white;
		height: 15px;
		left: 50%;
		margin-left: -106px;
		padding: 5px;
		position: relative;
		visibility: visible;
		width: 200px
	}
	.imageflow .loading_bar {
		background: #fff;
		height: 15px;
		visibility: visible;
		width: 1%
	}
	.imageflow .navigation {
		z-index: 10000
	}
	.imageflow .caption {
		font-weight: bold;
		position: relative;
		text-align: center;
		z-index: 10001
	}
	.imageflow .scrollbar {
		border-bottom: 1px solid #b3b3b3;
		position: relative;
		visibility: hidden;
		z-index: 10002;
		height: 1px
	}
	.imageflow .slider {
		/*background: url(slider.png) no-repeat;*/
		height: 14px;
		margin: -6px 0 0 -7px;
		position: absolute;
		width: 14px;
		z-index:...

JavaScript

/* ImageFlow constructor */
var selglide='';
var ee='';
function ImageFlow ()
{	
	
	/* Setting option defaults */
	this.defaults =
	{
		animationSpeed:     100,             /* Animation speed in ms */
		aspectRatio:        1.964,          /* Aspect ratio of the ImageFlow container (width divided by height) */
		buttons:            true,          /* Toggle navigation buttons */
		captions:           false,           /* Toggle captions */
		circular:           true,          /* Toggle circular rotation */
		imageCursor:        'default',      /* Cursor type for all images - default is 'default' */
		ImageFlowID:        'imageflow',    /* Default id of the ImageFlow container */
		imageFocusM:        1.0,            /* Multiplicator for the focussed image size in percent */
		imageFocusMax:      3,              /* Max number of images on each side of the focussed one */
		imagePath:          '',             /* Path to the images relative to the reflect_.php script */
		imageScaling:       true,           /* Toggle image scaling */ 
		imagesHeight:       0.74,           /* Height of the images div container in percent */
		imagesM:            1.0,            /* Multiplicator for all images in percent */
		onClick:            function() { /*document.location = this.url;*/ flipIt(this) },   /* Onclick behaviour */
		opacity:            true,          /* Toggle image opacity */
		opacityArray:       [10,8,6,4],   /* Image opacity (range: 0 to 10) first value is for the focussed image */
		percentLandscape:   118,            /* Scale landscape format */
		percentOther:       100,            /* Scale portrait and square format */
		preloadImages:      false,           /* Toggles loading bar (false: requires img attributes height and width) */
		reflections:        false,           /* Toggle reflections */
		reflectionGET:      '',             /* Pass variables via the GET method to the reflect_.php script */
		reflectionP:        0.4,            /* Height of the...