$slideshow = { context: false, tabs: false, timeout: 1000, slideSpeed: 1400, tabSpeed: 300, fx: 'scrollLeft', init: function() { this.context = $('#slideshow'); this.tabs = $('ul.slides-nav li', this.context); this.tabs.remove(); this.prepareSlideshow() }, prepareSlideshow: function() { $('div.slides > ul', $slideshow.context).cycle({ fx: $slideshow.fx, timeout: $slideshow.timeout, speed: $slideshow.slideSpeed, fastOnEvent: $slideshow.tabSpeed, pager: $('ul.slides-nav', $slideshow.context), pagerAnchorBuilder: $slideshow.prepareTabs, before: $slideshow.activateTab, pauseOnPagerHover: true, pause: true }) }, prepareTabs: function(i, slide) { return $slideshow.tabs.eq(i) }, activateTab: function(currentSlide, nextSlide) { var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context); if (activeTab.length) { $slideshow.tabs.removeClass('on'); activeTab.parent().addClass('on') } } }; $(function() { $('body').addClass('js'); $slideshow.init() });