2013-03-06 9 views
6

Utworzono suwak z Flexslider i próbuję użyć manualControls: aby utworzyć menu nawigacyjne, ale linki nie będą działać. Oto kod dla flexslider i suwaka/nawigacji samego:Instrukcja Flexslider Kontrolki nie działają

Flexslider:

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
     controlsContainer: ".slidercontainer", 
     controlNav: true, 
     manualControls: ".flex-control-nav li", 
     }); 
}); 
</script> 

Suwak i nav:

<div class="slidercontainer"> 
     <div class="flexslider"> 
      <ul class="slides"> 
       <li>slide1</li> 
       <li>slide2</li> 
      </ul> 
      <ul class="flex-control-nav"> 
       <li>1</li> 
       <li>2</li> 
      </ul> 
    </div>   
    </div> 

Odpowiedz

0

Przykład link: http://flexslider.woothemes.com/

Możesz prosty użyć kodu bezpośrednio

$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide" 
    }); 
}); 
+0

Nie jestem pewien co masz na myśli –

+0

Zgodnie z przykładem nie musisz definiować kontenera nawigacyjnego .. – ravisoni

+0

Jestem pewien, że musisz zdefiniować kontener nawigacyjny. Wydaje się, że tak jest ze wszystkich przykładów.Stosuje aktywną klasę do pierwszego linku w nawigacji, więc wie, co się dzieje, ale po kliknięciu nic się nie dzieje. –

10

naprawiłeś to jeszcze? Jeśli nie, odpowiedź brzmi, ponieważ FlexSlider nadal ma wydarzenie na żywo w plugin - ale jQuery ma to już nieaktualne.

Aby to naprawić; otwórz plik jQuery.flexslider.js i wykonaj polecenie find/replace dla "live", zastępując je "on". I rzeczywiście szukał ".live (" i zastąpić ".Na (" tylko upewnić się, mam tylko słuchacza zdarzeń. Istnieją 2 zdarzenia.

to wszystko. Działa doskonale!

+0

Po prostu to zrobiłem. Działa świetnie! Niezwykłe, że jeszcze tego nie zaktualizowali. – sleeper

2

https://github.com/woothemes/FlexSlider/issues/351

Brzmi jak tam jest dużo dzieje się z nim

używam Chrome przede wszystkim, a ja to dzieje się bez względu na to, co na ten temat.

http://www.templatemonster.com/demo/42317.html

Wersja FlexSlider że powiedział: jQuery FlexSlider v1.8

Ale znalazłem poprawkę na to:

http://wordpress.org/support/topic/chrome-bug-with-flexslider-plugin

Koniec wątku, a posty guy link do innej strony, że stacjonarnej ! I zostały zaksięgowane poniżej niezbędne linie:

Linia 34 w jquery.flexslider.js

slider.eventType = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click'; 

Wymieniłem go z dwóch następujących linii:

slider.touch = (("ontouchstart" in window) || (window.navigator.msPointerEnabled) || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch; 
slider.eventType = "click touchend MSPointerUp"; 

nadzieję, że pomoże.

+0

Dzięki. Rozwiązałem mój problem. –

0

Po prostu miałem ten sam problem, było to spowodowane włączeniem zdarzeń dotykowych na stronie chrome chrome flag: //, po wyłączeniu zdarzeń dotykowych działają strzałki i kropki nawigacji Flexslider.

Istnieje kilka miejsc w kodzie, w których Flexslider próbuje obliczyć błąd iOS, ale całkowicie wyłącza zdarzenia kliknięć w przeglądarkach obsługujących dotyk, które nie są iOS.