Hi,
I’ve exported code from Webflow that has some nice sliders. The structure of my page is very simple, it’s a series of
- header
- slider
- header
- slider
- etc…
Each header-slider pair is in a separate container. I want to add some javascript such that on opening the page, the sliders are collapsed, and they can be displayed by clicking a header. This is my code:
var Webflow = Webflow || [];
Webflow.push(function () {
// handler for clicking a header
$('h1').on('click', function() {
if ( $(this).parent().find('.slider').is(':visible') ) {
$('.slider').slideUp();
} else {
$('.slider').hide();
$(this).parent().find('.slider').slideDown();
$('html, body').animate({
scrollTop: ($(this).offset().top)
},500);
}
});
// initialize display: hide all sliders
setTimeout(function() {
$('.slider').hide()
}, 1000);
});
Problem is in the last line: $(‘.slider’).hide(). If I do this without timeout, the slider is screwed up: it has three bullets i.o. two, and when moving the slider, the slides end up misaligned.
So it looks like I must wait for Webflow to finish some initializations, but I assumed that the Webflow.push() would take care of this?
Thanks for sharing your ideas on how to proceed…
Vic