Slick Slider Images chevauchant et boutons cassés

Question

Je suis en train d'essayer de réapprendre certains CSS après de nombreuses années de codage. J'essaye de recréer un modèle de wordpress à la main et ai un problème avec un glisseur d'image.

J'ai essayé quelques-uns et je me suis installé sur http://kenwheeler.github.io/slick/ mais j'ai des problèmes avec mes images qui se chevauchent. Ils ont tous les mêmes dimensions et j'ai fait une recherche en ligne mais je ne trouve pas de réponse.

Les images pour les flèches gauche et droite sont cassées, comme le sont les points sous le curseur, des suggestions à ce sujet?

Mon site est ici: http://rdoyle.info/temp/

Answer 1

Le comportement attendu est pas très clair de votre question. Si vous souhaitez que les images soient aussi larges que les diapositives, vous devez définir leur min-width. Par exemple:

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

Si vous souhaitez augmenter l'espace entre les diapositives, vous pouvez le faire en établissant des marges. Vous pouvez les définir sur des diapositives ou sur leur contenu. Personnellement, je préfère les diapositives collées les unes aux autres, cela me donne un meilleur contrôle sur les fonctions d'animation. Le point ici est lisse ajustera automatiquement. Par exemple:

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

Pour combiner les deux, vous devez déduire les margin s du width, en utilisant calc:

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

---

Assurez-vous de lire la documentation slick. Si vous ne voulez pas être "surpris" par son processus de redessin, vous devez comprendre chaque fonctionnalité et l'utiliser comme prévu. Dans le cas contraire, cela fonctionnera contre vous et, par expérience, désactiver le comportement de slick interne (sans casser sa fonctionnalité) n'est pas une tâche facile.

Astuce: Définir des aides visuelles qui vous permettent de voir les éléments qui vous intéressent (j'utilise personnellement 1px rouge/blanc/noir frontières sur les éléments alors que je construis des animations, pour être en mesure de les voir en action).