Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* Extends Webflow Slider with public methods to swich between slides
*
* Paste this code on the Custom Code panel to get started:
*
* var slider = new W_SLIDER_CONTROLLER( '#element_id' );
* slider.setup('drag_disabled') // removes the drag-and-slide interaction
* slider.goto( 2 ); // jumps to the second slide
*/
var W_SLIDER_CONTROLLER = function( el ){
// force it to instance
// http://jsfiddle.net/vXbLL/
if (!this instanceof W_SLIDER_CONTROLLER)
return new W_SLIDER_CONTROLLER( el );
// WF is already using jQuery lets keep it that way
var $el = $( el );
if(!$el[0]){
console.error("Cannot find any Webflow Slider present!");
return;//exit
}
var _self = this;
// save DOM references that will act as slider controls
_self.$el = $el;
_self.$slides = $el.children('.w-slider-mask').children('.w-slide');
_self.$nav = $el.children('.w-slider-nav').children('.w-slider-dot');
_self.$el.attr('data-status', 'initialized');
return this;
};
/**
* @method count
* @return {Number} Qty of slides
*/
W_SLIDER_CONTROLLER.prototype.count = function(){
return this.$slides.length;
}
/**
* @method current
* @return {Number} Current index [begins at 1]
*/
W_SLIDER_CONTROLLER.prototype.current = function(){
return this.$nav.filter('.w-active').index() + 1
}
/**
* Jumps to the pervious slider (cyclic)
*
* @method prev
*/
W_SLIDER_CONTROLLER.prototype.prev = function(){
var tgt = this.current() - 1;
if(tgt > this.count())
tgt = 0;
else if(tgt < 0)
tgt = this.count();
this.goto( tgt );
};
/**
* Jumps to the next slider (cyclic)
*
* @method prev
*/
W_SLIDER_CONTROLLER.prototype.next = function(){
var tgt = this.current();
if(tgt > this.count())
tgt = 0;
else if(tgt < 0)
tgt = this.count();
this.goto( tgt );
};
/**
* Jumps to the specified slider
*
* Triggers W_BEFORE_SLIDE and W_ON_SLIDE for futher interactions
*
* @method prev
* @param {Number} index Desired slide index
*/
W_SLIDER_CONTROLLER.prototype.goto = function( index ){
$(this.$el).trigger('W_BEFORE_SLIDE');
$(this.$nav[index]).trigger('tap');
$(this.$el).trigger('W_ON_SLIDE');
};
/**
* Allows to configure the slider features
*
* @method setup
* @param {String} Desired action string
*/
W_SLIDER_CONTROLLER.prototype.setup = function(action){
var _self = this;
switch(action){
case 'drag_disabled':
// http://forum.webflow.com/t/disable-dragging-for-sliders/3225/6
Webflow.push(function() {
_self.$el.off('swipe');
});
break;
case 'infinite_loop':
// http://forum.webflow.com/t/disable-dragging-for-sliders/3225/6
Webflow.push(function() {
$('.w-slider').off('mousedown.w-slider touchstart.w-slider');
});
break;
}
};
@jahdakine
Copy link

jahdakine commented Mar 20, 2016

Hi,
I think this is what I'm looking for. Could it be used to test for an active slide, and if so, fire an event? Something like:
if (slider.current == 4) {
element.hide();
} else {
element.show();
}
Thanks for any insights!

Update: I just found the "Affect different elements" checkbox in the interactions pane. That did the trick. So you can ignore and delete this if you want. I will bookmark if I have a need for more in depth hooks into the slider. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment