JSFiddle - React, Tailwind, and code Playground

by Anam Ansari

HTML

<h1>iSlider</h1>
		
		<div id="header">
			
		</div>
		<div id="container">
        <div id="center" class="column">		
		
		

		<!-- This is all the XHTML ImageFlow needs -->
		<div id="myImageFlow" class="imageflow">
		<!-- 
			<img src="img/img1.png"  id="id1" longdesc="img/img1.png" width="300" height="360" alt="img1" />
			<img src="img/img2.png"  id="id2" longdesc="img/img2.png" width="300" height="360" alt="img2" />
			<img src="img/img3.png"  id="id3" longdesc="img/img3.png" width="300" height="360" alt="img3" />
			<img src="img/img4.png"  id="id4" longdesc="img/img4.png" width="300" height="360" alt="img4" />
			<img src="img/img5.png"  id="id5" longdesc="img/img5.png" width="300" height="360" alt="img5" />
			<img src="img/img6.png"  id="id6" longdesc="img/img6.png" width="300" height="360" alt="img6" />
			<img src="img/img7.png"  id="id7" longdesc="img/img7.png" width="300" height="360" alt="img7" />
			<img src="img/img8.png"  id="id8" longdesc="img/img8.png" width="300" height="360" alt="img8" />
			<img src="img/img9.png"  id="id9" longdesc="img/img9.png" width="300" height="360" alt="img9" />
			<img src="img/img10.png" id="id10" longdesc="img/img10.png" width="300" height="360" alt="img10" />
			<img src="img/img11.png" id="id11" longdesc="img/img11.png" width="300" height="360" alt="img11" />
			<img src="img/img12.png" id="id12" longdesc="img/img12.png" width="300" height="360" alt="img12" />
			<img src="img/img13.png" id="id13" longdesc="img/img13.png" width="300" height="360" alt="img13" />
			<img src="img/img14.png" id="id14" longdesc="img/img14.png" width="300" height="360" alt="img14" />
			<img src="img/img15.png" id="id15" longdesc="img/img15.png" width="300" height="360" alt="img15" />
			<img src="img/img16.png" id="id16" longdesc="img/img16.png" width="300" height="360" alt="img16" />  -->
		</div>
    
   </div>
    <div id="left" class="column">
    	
    </div>
   <div id="right" class="column">
   	
   </div>
   </div>
  <div...

CSS

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

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 1000px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
  background-color: red;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}

img
{
 -webkit-transform-style:preserve-3d;
 -webkit-transition:all 1.0s linear;
 transform-style:preserve-3d;
 transition:all 1.0s linear

}

.transition
{
 -webkit-transform:rotateY(180deg);
 transform:rotateY(180deg);

}

.notransition {

-webkit-transform:rotateY(0deg);
 transform:rotateY(0deg);

  }
	.imageflow {
		overflow: hidden;
		position: relative;
		text-align: left;
		visibility: hidden;
		width: 100%;
		
	}
	.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:...

JavaScript

/* ImageFlow constructor */
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:            false,          /* 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.67,           /* 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.5,            /* Height of the reflection in percent of the source...