
正直、簡単かなと思っていましたが、結構時間がかかってしまったので備忘録も兼ねて。
ポイントは、「overflow: hidden;」と「overflow: visible;」。


実装サンプル(横幅いっぱい+前後のスライドを半透明にする)
今回は、仕様がわかりやすいようにスライド画像の幅は「280px」で実装してみました。
slick-list要素に「overflow: visible;」を指定することで横幅いっぱいになります。
See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル(横幅いっぱい+前後のスライドを半透明にする) by 125naroom (@125naroom)
on CodePen.
実装サンプル NG
slick-list要素に「overflow: visible;」を指定しないと横幅いっぱいにはならないので要注意です。
See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル NG by 125naroom (@125naroom)
on CodePen.
実装サンプル +自動再生にしてみる
オプションの設定をして自動で動くようにしてみました。
See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル +自動再生にしてみる by 125naroom (@125naroom)
on CodePen.
実装サンプル +CSSでドットインジケーター(〇)をお洒落にしてみる
ドットインジケーターをお洒落にすると雰囲気がガラリと変わるのでおすすめです。
See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル +CSSでドットインジケーター(〇)をお洒落にしてみる by 125naroom (@125naroom)
on CodePen.
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに


関連記事
おすすめ
かんれん
- web / 2021.7.27
- 【jQuery】プラグインを使わずにモーダルを作ってみる
- web / 2022.1.5
- 【jQuery】下に固定要素を置くのでフッターの下を自動でズラす
- web / 2021.4.15
- 【jQuery】 ローディング、実装サンプル集
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2021.9.17
- 【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)
Googleさんのおすすめ
デザインの記事
- 2022.07.01New
- MEJINAVI2022|目白大学がまるっとわかるメジナビ
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.07.01New
- MEJINAVI2022|目白大学がまるっとわかるメジナビ
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2022.06.04
- 『点』、登場人物は3人だけ
- (C)2017 WARNER MUSIC JAPAN INC. もくじ 『点』 登場人物は3人だけ なんとも心地よい …
- いつかのこと – 無印良品の家と暮らす