Ihr möchtet mit Flexslider zu einem bestimmten Slide springen?
Kein Problem, auch wenn die Information der API-Dokumentation nicht direkt zu entnehmen ist.
Es genügt die folgende Zeile JavaScript:
// Flexslider-Objekt holen
var flexslider = jQuery('#deine-flexslider-id').data('flexslider');
var flexslider_target_id = 1; // Zur Slide-Nummer springen (beginnend bei 0)
// Sprung ausfuehren und anhalten (2. Parameter)
flexslider.flexAnimate(flexslider_target_id, 1);
In meinem konkreten Drupal-Beispiel war ein Sprung aus einer Galerie-Auswahl per Klick zu einem Slide gewünscht. Die Einbindung der Bestandteile erfolgte über Panel Panes. Hier das weitere Snippet als Bastelbeilage ohne weitere Erläuterung. Für alle Bastler:
function _flexsliderGalleryJumpToSlideInit() {
(function($) {
jQuery('ul#flexslider_views_slideshow_td_produkte_slider_navigation-panel_pane_2').each(function() {
$(this).find('li').each(function() {
var link = $(this).find('a');
var flexslider_target_id = $(this).find('.views-field-counter .field-content:first').text();
link.on('click', function() {
var flexslider = jQuery('#flexslider_views_slideshow_main_td_produkte_slider-panel_pane_2 .flexslider').data('flexslider');
flexslider.flexAnimate(flexslider_target_id, 1);
return false;
});
});
});
})(jQuery);
}
UPDATE:
Nachträglich stellte sich heraus, dass es bei dieser Lösung Probleme mit der nachträglichen Seitennavigation gibt. Eine bessere Lösung gibt es hier: http://stackoverflow.com/questions/12009523/flexslider-1-8-go-to-item
$('#your-slider').flexslider(2);
Wobei 2 das 3. Slide ist. Um z.B. auf das 1. Slide zu wechseln, verwendet 0.
GANZ WICHTIG: Der Wert muss dabei unbedingt vom Typ "Number" sein. Notfalls per Number() einen Typecast durchführen!
