Slick Slider Bilder Overlapping und Broken Buttons

Question

Ich bin dabei, einige CSS nach vielen Jahren weg von der Codierung zu lernen. Ich versuche, eine Wordpress-Vorlage von Hand neu zu erstellen und habe ein Problem mit einem Bildregler.

Ich habe ein paar versucht und habe mich auf http://kenwheeler.github.io/slick/ festgelegt, aber ich habe Probleme mit meinen Bildern überlappend. Sie haben alle die gleichen Dimensionen und ich habe online gesucht, kann aber keine Antwort finden.

Die Bilder für die linken und rechten Pfeile sind gebrochen, wie auch die Punkte unter dem Slider, irgendwelche Vorschläge dazu?

Meine Website ist hier: http://rdoyle.info/temp/

Answer 1

Das gewünschte Verhalten aus Ihrer Frage nicht ganz klar ist. Wenn Sie die Bilder so breit wie die Folien machen möchten, müssen Sie ihre min-width einstellen. Beispiel:

.slick-slide img { 
    min-width: 100%; 
} 

Wenn Sie den Abstand zwischen den Folien vergrößern möchten, können Sie dies tun, indem Sie Ränder festlegen. Sie könnten sie auf Folien oder auf deren Inhalt setzen. Ich persönlich bevorzuge Folien, die aneinander geklebt sind, wodurch ich die Animationsfunktionen besser steuern kann. Der Punkt hier ist Slick wird automatisch anpassen. Zum Beispiel:

.slick-slide img { 
    margin: 0 50px; 
} 

Um die beiden zu kombinieren, müssen Sie die margin s vom width abziehen, mit calc:

.slick-slide img { 
    min-width: calc(100% - 100px); 
    margin: 0 50px; 
} 

---

Stellen Sie sicher, lesen Sie slick Dokumentation. Wenn Sie nicht durch den Prozess des Neuzeichnens "überrascht" werden möchten, müssen Sie jedes Feature verstehen und wie vorgesehen verwenden. Sonst wird es gegen Sie arbeiten und aus Erfahrung heraus ist das Deaktivieren von internem Slick-Verhalten (ohne seine Funktionalität zu unterbrechen) keine leichte Aufgabe.

Tipp: Set visuelle Helfer, die es Ihnen ermöglichen, Elemente zu sehen, der Sie interessiert (Ich persönlich benutze rot/weiß/schwarz 1px Grenzen auf Elemente, während ich Animationen erstellen, in der Lage zu sein, sie in Aktion zu sehen).