Product Slider

[Tronjer]

Hätte jemand eine Empfehlung für einen kostenlosen Product-Slider, ähnlich wie auf diesem Bild? Er muss infinite auto-sliding behersschen. Was ihn von einem Standard Carousel unterscheidet ist der Punkt, dass unterhalb der Bildes drei Textzeilen angezeigt werden sollen, die per PHP befüllt werden und beim Klick kein großes Bild geladen sondern zu einer Seite verlinkt wird. Die klassischen Slider können, wenn überhaupt, nur das Title-Attribut des Images als Textzeile darstellen. Da ich hier allerdings drei Zeilen bräuchte, müssten die Texte entweder als Data-Attribute oder zusätzliche <span> oder <p> übergeben werden.

Alternativ dazu überlege ich gerade, wie man so etwas selber baut. Vom CSS her wäre es eine beliebig lange Liste gefloateter Blockelemente. Das Eltern-Div erhält ein overflow:hidden, damit nur die ersten 4 Bilder aus der Liste angezeigt werden.

Vom JavaScript her gibt es ein Click Event für die Pfeile, welches dem ersten Bild ein display:none gibt, damit ein neues in den sichtbaren Bereich rückt. Zusätzlich könnte man dieses Event per Timing-Funktion aufrufen und hätte damit ein auto-sliding. Problem ist dann allerdings das infinite sliding, denn wenn das letzte Bild aus der Liste in den sichtbaren Bereich rückt, soll im Anschluß wieder das erste angezeigt werden. Was bedeutet, dass bei jedem Slide nicht nur ein Bild unsichtbar gemacht, sondern auch die gesamte Liste im DOM umsortiert werden müsste, und das ist nicht besonders performant.

 

[Banana_Jones]

Ich habe für ein ähnliches Problem dieses Plugin genommen: http://www.smoothdivscroll.com/
Dieses scrollt allerdings kontinuierlich und kann mit den Pfeilen beschleunigt werden. Vielleicht kommt das Verhalten für dich ja auch in Frage.

Die Performance war an sich i.O., ging aber schnell in die Knie, wenn es gleich mehrere Slider auf der selben Seite waren.

 

[Tronjer]

Danke, ich habe es mit Flexslider 2 gebaut.

 

[threadi]

Mit dem Anythingslider geht das auch.

Und mit HTML hat das nix zu tun ;)

 

[Tronjer]

Da war ich dann wohl off-topic. ;)

Aber die Aufgabe war schon etwas knifflig, weil ich den Slider analog zu den Vorstellungen des Grafikdesigners umbauen musste.

 

[threadi]

Mit anythingslider ist mir das bisher immer gelungen ;) Grenzen gibts höchstens beim Verhalten, aber auf diese Ideen muss man erst mal kommen ;)

 

[Tronjer]

In diesem speziellen Fall ging es darum, dass nicht nur mehrere Bildelemente mit darunter befindlichen Textzeilen gleichzeitig angezeigt werden, sondern die Navigationspfeile für Previous und Next außerhalb dieser Elemente aber noch innerhalb des Sliders liegen. So ähnlich wie auf dem oberen Bild, nur dass ich andere Background-Images für die Pfeile verwende.

Das kann der Anything-Slider laut css-tricks.com auf den ersten Blick nicht. Im Nachhinein betrachtet hätte ich mir vielleicht einen Workaround bauen können, in dem ich den Slider etwas schmaler mache, ihn in ein weiteres Div mit Rahmen einbette und die Pfeile weiter nach außen verschiebe. Aber der Flexslider lag out-of-the-box dichter an meinen Anforderungen und sah nach weniger Arbeit aus.

Wenn du mir jetzt allerdings erzählst, dass der Anything-Slider prinzipiell die bessere Lösung ist, denke ich beim nächsten mal gerne darüber nach. ;)

 

[threadi]

Ja, das geht mit dem Script. Es gibt eine Option mit der man die Navigationselemente an einer beliebigen anderen Stelle im DOM der Seite unterbringen kann. Ich denke aber nicht, dass der anythingslider der einzige ist, der das kann ;)