すべてのカテゴリ

皆さんこんにちは。山本佑樹です。昨日はお問い合わせフォームを作成するためのプラグインをご紹介させていただきました。今回は、スライダー機能を追加したい場合にオススメできるプラグインを紹介いたします。Wordpressでスライダーを作るなら、「SmartSlider」がオススメです！機能・設定が豊富でサムネイル付きのスライダーを作成でき、レスポンシブにも対応しています。スライダーを作成するためのプラグインが他にも複数ありますが、「SmartSlider」をぜひ一度試してみてください。少しでも参考になれば嬉しいです。

Slickで slidesToShow を使って複数のアイテムを並べたとき、スライド間の余白をどう作るのがベストか？ いろいろ試した結果、一番確実でキレイに収まる方法を紹介します。 結論：これがベストプラクティス！ .slick-list {   margin: 0 -15px; } .slick-slide {   margin: 0 15px; } なぜこの方法が良いのか？ ● .slick-slide に margin を指定することで、スライド間に適切な間隔を作れる ● .slick-list に margin を指定することで、余白を相殺してレイアウトのズレを防ぐ ● レスポンシブ対応がしやすい ● Slick のデフォルトの動作を壊さない Slick のオプションで余白を作れないの？Slickには直接スライド間の間隔を設定するオプションは ない ので、CSSで対応する必要があります。 試した方法とその結果はこちら。 1. Slick のオプションを調整する → 失敗 slidesToShow や slidesToScroll などでは余白を作れない 2. .slick-track { gap: 15px; } を使う → 失敗 Slick 1.8.1 では .slick-track の display は block のままなので gap は効かない 3. .slick-slide { padding: 0 15px; } を使う → 一応OK スライド間の余白はできるが、.slick-track の余白調整が必要になる 4. .slick-slide { marg