Last active
March 11, 2022 04:55
-
-
Save pabliqe/2708a263e75403f28b0a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!