Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andreas Anastasiades
2,916 PointsAutoplay slider in WP theme
Hi,
I'm using bigfoot theme on my site which has a great template for showcases. It's a fullscreen slider with captions. Unfortunately I want it to play automatically but can't figure out how..
I'm guessing this is the code for the slider. Anyone got a clue?
Thanks in advance
/**
* Home page slider
*/
(function($) {
window.HomePageSlider = {
currentSlide: 0,
init: function() {
this.container = $("#thb-home-slides");
this.pictures = $(".thb-home-slide > img");
this.header = $(".header-container");
this.footer = $(".home-footer-container");
this.captions = $(".thb-home-slide-caption");
this.banners = $(".thb-banner");
this.homeExpand = $(".thb-home-expand");
this.controlNext = $(".thb-home-slides-next");
this.controlPrev = $(".thb-home-slides-prev");
this.pagerContainer = $(".thb-home-slides-pager");
this.pager = $(".thb-home-slides-pager a");
$("body").addClass("thb-loading");
this.bindEvents();
this.showHideControls();
this.loadFrontImage();
},
positionElements: function() {
var $w = $(window),
header_height = $(".header-container").outerHeight() + ($("#wpadminbar").length ? 28 : 0),
footer_height = $(".home-footer-container").outerHeight(),
diff = parseInt( (footer_height - header_height) / 2, 10 );
if( !footer_height ) {
footer_height = 48;
}
HomePageSlider.captions.css({
'top' : header_height,
'bottom' : footer_height
});
if( $("html").hasClass("no-csstransforms") ) {
HomePageSlider.banners.each(function() {
$(this).css("margin-top", - ($(this).outerHeight() / 2) + diff );
});
}
else {
HomePageSlider.banners.each(function() {
$(this).css("margin-top", diff );
});
}
HomePageSlider.pagerContainer.css({
bottom: footer_height
});
},
loadFrontImage: function() {
setTimeout(function() {
if( ! HomePageSlider.pictures.length ) {
HomePageSlider.container.addClass("thb-slider-loaded");
}
else {
$.thb.loadImage( HomePageSlider.pictures, {
imageLoaded: function( image ) {
image.parent().thb_stretcher({
adapt: false
});
image.parent().addClass("thb-slide-loaded");
$("body").removeClass("thb-loading");
setTimeout(function() {
HomePageSlider.container.addClass("thb-slider-loaded");
}, 10);
}
} );
}
}, 500);
},
bindEvents: function() {
$.thb.key("right", function() {
HomePageSlider.right();
});
$.thb.key("left", function() {
HomePageSlider.left();
});
HomePageSlider.controlNext.click(function() {
HomePageSlider.right();
return false;
});
HomePageSlider.controlPrev.click(function() {
HomePageSlider.left();
return false;
});
HomePageSlider.homeExpand.click(function() {
if( $("body").hasClass("w-home-expand") ) {
$(this).attr("data-icon", "u");
$("body").removeClass("w-home-expand");
}
else {
$(this).attr("data-icon", "p");
$("body").addClass("w-home-expand");
}
return false;
});
HomePageSlider.pager.click(function() {
if( ! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving ) {
return false;
}
var target = $(this).data("target");
HomePageSlider.pager.removeClass("active");
$(this).addClass("active");
if( target !== HomePageSlider.currentSlide ) {
if( target > HomePageSlider.currentSlide ) {
for(i=HomePageSlider.currentSlide; i<target; i++) {
HomePageSlider.right(true);
}
}
else {
for(i=HomePageSlider.currentSlide; i>target; i--) {
HomePageSlider.left(true);
}
}
}
return false;
});
$('body.thb-mobile').hammer().bind('swipeleft', function() {
HomePageSlider.right();
return false;
});
$('body.thb-mobile').hammer().bind('swiperight', function() {
HomePageSlider.left();
return false;
});
},
right: function( programmatic ) {
if( ! programmatic && (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
return false;
}
var active_slides = $(".thb-home-slide.active"),
slides = $(".thb-home-slide"),
last_active = active_slides.last();
if( active_slides.length < slides.length ) {
$.thb.transition(last_active, function() {
thb_moving = false;
});
last_active.addClass("out");
last_active.next().addClass("active");
this.currentSlide++;
thb_moving = true;
}
else {
thb_moving = true;
$("#thb-home-slides").stop().animate({
"margin-left": -20
}, 150, 'linear', function() {
$(this).stop().animate({
"margin-left": 0
}, 500, 'easeOutElastic', function() {
thb_moving = false;
});
});
}
this.showHideControls();
},
left: function( programmatic ) {
if( ! programmatic && (! HomePageSlider.container.hasClass("thb-slider-loaded") || thb_moving) ) {
return false;
}
var active_slides = $(".thb-home-slide.active"),
last_active = active_slides.last();
if( active_slides.length > 1 ) {
$.thb.transition(last_active, function() {
thb_moving = false;
});
last_active.prev().removeClass("out");
last_active.removeClass("active");
this.currentSlide--;
thb_moving = true;
}
else {
thb_moving = true;
$("#thb-home-slides").stop().animate({
"margin-left": 20
}, 150, 'linear', function() {
$(this).stop().animate({
"margin-left": 0
}, 500, 'easeOutElastic', function() {
thb_moving = false;
});
});
}
this.showHideControls();
},
showHideControls: function() {
var active_slides = $(".thb-home-slide.active"),
slides = $(".thb-home-slide");
HomePageSlider.controlPrev.css({'visibility': 'visible'});
HomePageSlider.controlNext.css({'visibility': 'visible'});
if( active_slides.length === 1 ) {
HomePageSlider.controlPrev.css({'visibility': 'hidden'});
}
if( active_slides.length === slides.length ) {
HomePageSlider.controlNext.css({'visibility': 'hidden'});
}
HomePageSlider.pager.removeClass("active");
HomePageSlider.pager.eq(active_slides.last().index()).addClass("active");
},
};
})(jQuery);
I tried adding this.autoPlay();
with
autoPlay: function()
{
clearTimeout(this.timer);
//auto play
this.timer = setTimeout(function () {
HomePageSlider.right();
}, 2500)
}
Effect was only 1 slide got triggered and then stopped again. I want it to go through all slides, not just go to the second slide.