Slick Slider画像オーバーラップと壊れたボタン

Question

私は、コーディングから何年も後にいくつかのCSSを再学習しようとしています。私は手作業でWordPressテンプレートを再作成しようとしており、画像スライダに問題があります。

私は少し試して、http://kenwheeler.github.io/slick/に解決しましたが、画像の重複に問題があります。それらはすべて同じ次元であり、私はオンラインで検索しましたが、答えを見つけることはできません。

スライダの下の点と同様に、左右の矢印の画像が壊れていますが、これに関する提案はありますか？

私のサイトはこちら：http://rdoyle.info/temp/

Answer 1

意図した行動は、あなたの質問から必ずしも明らかではありません。画像をスライドと同じ幅にする場合は、min-widthを設定する必要があります。例：

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

スライド間のスペースを増やしたい場合は、余白を設定してください。スライドやコンテンツに設定できます。私は個人的には、お互いに接着されたスライドを好む、それは私にアニメーション機能をよりよく制御します。ここのポイントは滑らかです自動調整します。たとえば：

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

2を組み合わせることが、あなたはcalcを使用して、widthからmargin Sを控除する必要があります。

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

---

あなたはslickドキュメントを読んで確認してください。再描画プロセスによって「驚かされる」ことを望まない場合は、各機能を理解し、意図したとおりに使用する必要があります。さもなければ、それはあなたに対して機能し、経験から、内部の滑らかな動作を（機能を壊さずに）無効にすることは簡単なことではありません。

ヒント：あなたは（私はアニメーションを構築しながら、私は個人的にアクションでそれらを見ることができるように、要素の上に黒/白/赤1pxボーダーを使用）に興味を持っている要素を参照することができます設定し、視覚的ヘルパー。