JSFiddle - React, Tailwind, and code Playground

by lsubirana

HTML

<br /><br />
<div>aaasdfd sd</div><br />
<div class="hero">
    <div class="sl" data-ttl="6" ><div class="img"><a href="/en/Purchase.aspx"><img src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" alt="Managing the Data Crunch" width="940" height="300"></a></div></div>
    
    <div class="sl" data-ttl="10"><div class="img"><a href="/en/Solutions.aspx"><img src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg" alt="" width="980" height="125"></a></div></div>
    
</div>

CSS

.hero {
    margin-top: 10px;
    overflow: hidden;
    width:940px;
    height:300px;
}
.sl{ width:940px;
    height:300px;
    overflow: hidden; 
    display:block;
    position:absolute;
    background-color:transparent;
}
.sl .img{ width:940px;
    height:300px;
    position:relative;
    background-color:transparent;
}

JavaScript

var $sl = jQuery('.sl').eq(0);
var $imgDiv = $sl.find('.img');
    
    // img div
    $imgDiv.css({ left: '940px' });
    //$imgDiv.show();
    //$sl.show();
    $imgDiv.animate({ 'left': '0px' }, { duration: '5000', queue: false });

var $imgDivOld = jQuery('.sl').eq(1);;
$imgDivOld.animate({ 'left': '-900px' },
        {
            duration: '5000',
            queue: false,
            complete: function () {
                //alert('hide old img');
                $imgDivOld.hide();
                //alert('hide old slide');
                //h.$oldSlide.hide();
            }
        });