JQuery Zyklus Plugin mehrere Pager in der gleichen Seite

Question

habe ich ein Problem mit dem Zyklus-Plugin mehrerer Pager in der gleichen Seite Ich möchte 24 Zyklus-Plugin in der gleichen Seite zeigen. Jedes Plugin enthält einige Bilder und Informationen. So würde Ich mag sie steuern mit „Pager“. Alles ist in Ordnung, alle Plugins es einfache Dokument-Ready-Funktion funktioniert. Aber ich habe ein ganz anderes Problem mit Pager.

Wenn ich versuche, pager:"#nav" und .before("<div id="nav"></div>") in der Funktion des Plug-In hinzuzufügen. Das Skript erstellt einen Container wie diese <div id="nav"></div> und dann anfügt Plugin alle Pager-Links in diesem Container. So Alle Pagern Links zeigt in einem Container-ID es so verursacht.

http://onur.mayanet.com.tr/test

Ich möchte den Zugang zu etwas, dass jedes Plugin mit seinem eigenen Pager funktionieren sollte.

Answer 1

IDs auf einer Seite müssen eindeutig sein, diese so ändern:

$('.slideshow').before('<div id="nav"></div>').cycle({
    fx: 'scrollLeft',
    speed: 'fast',
    timeout: 350,
    pager: "#nav"
});

Um dies zu:

$('.slideshow').each(function() {
  $(this).before('<div class="nav"></div>').cycle({
    fx: 'scrollLeft',
    speed: 'fast',
    timeout: 350,
    pager: $(this).prev()
  });
});

Sie können es testen hier heraus, alles, was wir hier tun, ist looping durch und Erstellen / Zuweisen jeder einen Pager, anstatt eine id verwendet, die eindeutig sein. Seien Sie sicher, dass Ihre #nav CSS-Regeln zu .nav ändern sowie den id => class Änderung entsprechen.