JSFiddle - React, Tailwind, and code Playground

by sp182

HTML

<div class="ui_interactive bg_div1" data-width="700px" data-height="400px">
                    <div class="ui_slides">
                        <div class="ui_slide">
						<!--<div class="bg_size">-->
						<div class="bg_img">
						<div class="prev"></div>
						<div class="next"></div>
						<div class="restart"><span class="res_txt">RESTART?</span></div>
						<!--</div>-->
						</div>
						</div>
						
						</div>
						
						</div>

CSS

/* CSS Document */

/*.bg_size{width:1387px;
height:1182px;
position:absolute;}*/

.ui_slides, .ui_slide {
    overflow:hidden !important;
}

.bg_img{background:url(../images/02_05_01_story.png) no-repeat;
width:1387px;
height:1182px;
margin-top:-8px;
margin-left:-8px;
}

.ui-slideshow-clip { height:400px!important; }

.prev{ background:url(../images/02_05_01_prev.png) no-repeat;
width:52px;
height:53px;
margin: 325px 0 0 565px;
position:absolute;
display:none;}

.prev:hover{ background:url(../images/02_05_01_prev_over.png) no-repeat;
width:52px;
height:53px;
margin: 325px 0 0 565px;
position:absolute;
cursor:pointer;
}

.next{ background:url(../images/02_05_01_next.png) no-repeat;
width:52px;
height:53px;
margin: 325px 0 0 630px;
position:absolute;}

.next:hover{ background:url(../images/02_05_01_next_over.png) no-repeat;
width:52px;
height:53px;
margin: 325px 0 0 630px;
position:absolute;
cursor:pointer;
}


.restart{ background:url(../images/02_05_01_restart.png) no-repeat;
width:206px;
height:43px;
margin: 325px 0 0 565px;
position:absolute;
display:none;}

.restart:hover{ background:url(../images/02_05_01_restart_over.png) no-repeat;
width:206px;
height:43px;
margin: 325px 0 0 565px;
position:absolute;
cursor:pointer;
}

.res_txt{color: #FFFFFF;
    float: left;
    font-size: 23px;
    font-weight: bold;
    margin: 5px 0 0 40px;}

.res_txt:hover{color:#ECE9D8; 
    float: left;
    font-size: 23px;
    font-weight: bold;
    margin: 5px 0 0 40px;}

JavaScript

// JavaScript Document
var count = 0;

$('.next').live('click',function(){
/*alert(count);*/
count++;
if(count == 1){
$('.bg_img').animate({ marginTop: '-8px' , marginLeft: '-707px' }, "slow");
$('.prev').css({'margin':'325px 0 0 1267px'}).show();
$('.next').css({'margin':'325px 0 0 1327px'});
}
if(count == 2){
$('.bg_img').animate({ marginTop: '-403px' , marginLeft: '-8px' }, "slow");
$('.prev').css({'margin':'725px 0 0 572px'}).show();
$('.next').css({'margin':'725px 0 0 630px'});
}
if(count == 3){
$('.bg_img').animate({ marginTop: '-403px' , marginLeft: '-707px' }, "slow");
$('.prev').css({'margin':'725px 0 0 1267px'}).show();
$('.next').css({'margin':'725px 0 0 1327px'});
}
if(count == 4){
$('.bg_img').animate({ marginTop: '-803px' , marginLeft: '-8px' }, "slow");
$('.prev').css({'margin':'1120px 0 0 572px'}).show();
$('.next').css({'margin':'1120px 0 0 630px'});
}
if(count == 5){
$('.bg_img').animate({ marginTop: '-803px' , marginLeft: '-707px' }, "slow");
$('.restart').css({'margin':'1120px 0 0 1170px'}).show();
$('.prev,.next').hide();
}
});

$('.prev').live('click',function(){
/*alert(count);*/
count--;
if(count == 0){
$('.bg_img').animate({ marginTop: '-8px' , marginLeft: '-8px' }, "slow");
$('.next').css({'margin':'325px 0 0 630px'});
$('.prev').hide();
}
if(count == 1){
$('.bg_img').animate({ marginTop: '-8px' , marginLeft: '-707px' }, "slow");
$('.prev').css({'margin':'325px 0 0 1267px'}).show();
$('.next').css({'margin':'325px 0 0 1327px'});
}
if(count == 2){
$('.bg_img').animate({ marginTop: '-403px' , marginLeft: '-8px' }, "slow");
$('.prev').css({'margin':'725px 0 0 572px'}).show();
$('.next').css({'margin':'725px 0 0 630px'});
}
if(count == 3){
$('.bg_img').animate({ marginTop: '-403px' , marginLeft: '-707px' }, "slow");
$('.prev').css({'margin':'725px 0 0 1267px'}).show();
$('.next').css({'margin':'725px 0 0 1327px'});
}
});

$('.restart').live('click',function(){
$('.bg_img').animate({ marginTop: '-8px' , marginLeft: '-8px' },...