Flexslider: Zu einem Slide springen (+ Drupal Flexslider snippet)

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:

  1.     // Flexslider-Objekt holen
  2.     var flexslider = jQuery('#deine-flexslider-id').data('flexslider');
  3.    
  4.     var flexslider_target_id = 1; // Zur Slide-Nummer springen (beginnend bei 0)
  5.     // Sprung ausfuehren und anhalten (2. Parameter)
  6.     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:

  1. function _flexsliderGalleryJumpToSlideInit() {
  2.   (function($) {
  3. jQuery('ul#flexslider_views_slideshow_td_produkte_slider_navigation-panel_pane_2').each(function() {
  4.       $(this).find('li').each(function() {
  5.         var link = $(this).find('a');
  6.         var flexslider_target_id = $(this).find('.views-field-counter .field-content:first').text();
  7.         link.on('click', function() {
  8.           var flexslider = jQuery('#flexslider_views_slideshow_main_td_produkte_slider-panel_pane_2 .flexslider').data('flexslider');
  9.           flexslider.flexAnimate(flexslider_target_id, 1);
  10.           return false;
  11.         });
  12.       });
  13.     });
  14.   })(jQuery);
  15. }

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

  1. $('#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!

Kommentare

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Weitere Informationen über Formatierungsoptionen