JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script><style type="text/css"></style>
<script src="http://marashan.com/site/js/jquery.transform-0.9.3.min_.js"></script>
<script src="http://marashan.com/site/js/jquery.transform2d.js"></script>
<style type="text/css">
.gallery{
height: 720px;
overflow: hidden;
position: relative;
text-align: center;
}
.gallery .a{
position: absolute;
top: 50%;
left: 50%;
margin-left: -81px;
margin-top: 88px;
opacity: 0;
}
.gallery .a.pic1{
top: 300px;
left: 0px;
}
.gallery .a.pic2{
top: 150px;
left: 100px;
}
.gallery .a.pic3{
top: 150px;
right: 100px;
}
.gallery .a.pic4{
top: 300px;
right: 0px;
}
.gallery .box{
display: inline-block;
padding-top: 200px;
}
.gallery .next{
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -65px;
margin-top: 27px;
cursor: pointer;
z-index: 400;
}
.gallery .carousel_gallery{
width: 700px;
height: 541px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -350px;
}
.gallery .carousel_gallery .a[data-main='true']{
display: inline-block;
position: absolute;
top: 200px;
left: 99px;
cursor: pointer;
opacity: 0;
}
.gallery .carousel_gallery .a[data-main='true'] img{
display: block;
}
.gallery .carousel_gallery_hide{
display: none;
width: 360px;
height: 280px;
position: absolute;
top: 300px;
left: 50%;
}
.gallery .carousel_gallery_hide .a{
display: inline-block;
}
.gallery .carousel_gallery_hide .a img{
display: block;
}
</style>
<script type="text/javascript">
$.fn.extend({
KCarusel:function(opt){
if(opt===undefined)
opt={ }
var...