$(function() { var bb_tags = { wrapper: $('#banner-wrapper'), nav_items: $('#slide-controller a'), nav_parent: $('#slide-controller'), nav_active: '.active', slides: $('.slide') }; var timing = { timer: 8000 }; bb_tags.wrapper.css('overflow', 'hidden'); bb_tags.nav_items.first().parent().addClass('active'); bb_tags.wrapper.scrollLeft(0); bb_tags.nav_items.click(function(i) { $(document).stopTime(); nav_link = $(this); slide_id = nav_link.attr('href'); slide_number = getSlideNumber(slide_id); setActiveNav($(bb_tags.nav_active, bb_tags.nav_parent), nav_link.parent()); moveToSlide($(slide_id), slide_number); return false }); function moveToSlide(next_slide, slide_number) { slide_width = next_slide.width(); bb_tags.wrapper.animate({ scrollLeft: slide_width * slide_number }, 1000) } function setActiveNav(oldNav, newNav) { oldNav.removeClass('active'); newNav.addClass('active') } function getSlideNumber(slide_id) { slide_number = slide_id.split(/-/); slide_number = slide_number[1] - 1; return slide_number } $(document).everyTime(timing.timer, function(i) { if (i <= 3) { next_slide = bb_tags.slides.eq(i); next_nav = bb_tags.nav_items.eq(i).parent(); setActiveNav($(bb_tags.nav_active), next_nav); moveToSlide(next_slide, i) } else { first_slide = bb_tags.slides.eq(0); first_nav = bb_tags.nav_items.eq(0).parent(); moveToSlide(first_slide, 0); setActiveNav($(bb_tags.nav_active), first_nav); $(this).stopTime() } }) });