Jquery slider without cloning
Jquery slider without cloning
HTML
<div id="MainSliderContent" style="display: table-cell;">
<div class="Message">
Test 1
</div>
<div class="Message">
Test 2
</div>
<div class="Message">
test 3
</div>
<div class="Message">
Test 4
</div>
</div>
JavaScript
$(document).ready(function () {
//if ($('#MainSliderContent').find('div.Message').length > 1) {
$('#MainSliderContent').find('div.Message:not(:first)').hide();
$('#MainSliderContent').live({
mouseenter: function () {
$(this).addClass('Hover');
},
mouseleave: function () {
$(this).removeClass('Hover');
}
});
setInterval(function () {
if (!$('#MainSliderContent').hasClass('Hover')) {
var $messageObj = $('#MainSliderContent').find('div.Message:visible');
$messageObj.slideUp('slow').next('div.Message').slideLeft('slow');
$('#MainSliderContent').find('div.Message:last').after($messageObj);
}
}, 1 * 1000);
//}
});