jQuery+Cycle2+Carousel: Problem mit Links

[ottogal]

Hallo in die Runde,

ein Bilder-Karussell (siehe das verlinkte codepen) klappt, wenn ich nur img-Elemente aneinanderreihe. Ich möchte diese allerdings durch Umschließen mit a-Elementen anklickbar machen - wie im zweiten div des Codes. Wie man sieht, geht dabei der carousel-Effekt verloren.

Was kann/muss ich tun, um ein Karussell mit a-Elementen zu erstellen?

Dankbar für eure Hinweise ottogal

[Fischkopp]

moin

siehe das verlinkte codepen

gibts das JS auch mit sprechenden Bezeichnern?

tschüss

[ottogal]

Ich habe in das JS-Fenster einfach den Quelltext des minifizierten Plugins jquery.cycle2.carousel.min.js hineinkopiert, weil es (im Gegensatz zu jQuery und dem Cycle2-Plugin) nicht in der Liste hinzufügbarer Skripts vorhanden ist.

[Gunnar Bittersmann]

@@ottogal

ein Bilder-Karussell (siehe das verlinkte codepen) klappt, wenn ich nur img-Elemente aneinanderreihe. Ich möchte diese allerdings durch Umschließen mit a-Elementen anklickbar machen - wie im zweiten div des Codes. Wie man sieht, geht dabei der carousel-Effekt verloren.

Offensichtlich werden also nicht die Kinder des .cycle-slideshow karusselliert, sondern img-Elemente.

Was kann/muss ich tun, um ein Karussell mit a-Elementen zu erstellen?

In der Doku (oder, wenn du magst, im Quelltext?) nach "img" suchen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Offensichtlich werden also nicht die Kinder des .cycle-slideshow karusselliert, sondern img-Elemente.

Genau.

Zeile 676: slides: '> img',
Zeile 1142: var images = slide.is('img') ? slide : slide.find('img');

🖖

Bis demnächst
Matthias

[ottogal]

Besten Dank, Gunnar, das half! Zwar hatte ich die Doku sehr wohl durchstöbert, aber das slides-Attribut habe ich dabei übersehen... Ich habe die korrigierte Variante als drittes div dem codepen hinzugefügt (mit data-cycle-slides='> a' statt dem Defaultwert '> img').

[Gunnar Bittersmann]

@@ottogal

Ich habe die korrigierte Variante als drittes div dem codepen hinzugefügt (mit data-cycle-slides='> a' statt dem Defaultwert '> img').

Ich wusste, du kommst drauf, wie das einzubauen ist. ;-)

Und wenn du verlinkte und unverlinkte Bilder oder gar andere Inhalte im Karussell hast oder später haben könntest und dann nicht nochmal überlegen willst, könntest du auch den Santa hat selector > * verwenden.

LLAP 🖖