function mainBanner(id) { var this_id = $(id); var prevBtn = this_id.parent().find(".btn-prev"), nextBtn = this_id.parent().find(".btn-next"); var timeout = false; var minSize = 5, maxSize = this_id.children().length; function doorMove() { this_id.css({ "height" : this_id.children().outerHeight(), "overflow" : "hidden" }); prevBtn.addClass('check'); nextBtn.addClass('check'); if(maxSize > minSize) moveStart(); } function move() { var first_li = this_id.find('li:first-child').clone(); this_id.find('li:first-child').remove(); this_id.append(first_li); } function moveStart() { if(timeout == false && maxSize > minSize) { timeout = setInterval(move, 5000); } } function moveStop() { if(timeout != false && maxSize > minSize) { clearInterval(timeout); timeout = false; } } prevBtn.on('click',function() { if(maxSize > 2) { $(this).removeClass('check'); if(!this_id.hasClass('stop')) moveStop(); var first_li = this_id.find('li:first-child').clone(); this_id.find('li:first-child').remove(); this_id.append(first_li); prevBtn.addClass('check'); if(!this_id.hasClass('stop')) moveStart(); } }); nextBtn.on('click',function() { if(maxSize > 2) { if($(this).hasClass('check')) { $(this).removeClass('check'); if(!this_id.hasClass('stop')) moveStop(); var last_li = this_id.find('li:last-child').clone(); this_id.find('li:last-child').remove(); this_id.prepend(last_li); nextBtn.addClass('check'); if(!this_id.hasClass('stop')) moveStart(); } } }); $(window).on("resize", function() { moveStop(); this_id.css({ "height" : this_id.children().outerHeight(), "overflow" : "hidden" }); moveStart(); }); doorMove(); }