2023年12月26日ツイートシェアはてブLINEPocketjQueryスライダー「slick.js」の基本的な使い方は前回の「使い方とオプション設定」で説明しましたが、今回は実際の制作で役立つ実装編です。基本的な使い方からオプション設定を利用したスライダーの見せ方など、いくつかご紹介していきますので参考にされてください。});});自動再生を有効化、ドットインジケーターを有効化にしています。});});slidesToShowで表示枚数を指定しています。});});slidesToShowで表示枚数を指定、slidesToScrollでスライド枚数を指定しています。});});centerModeを設定することで画像が中央寄せで表示することができます。みことあれ?中央に配置するだけでこんな風になるのですか?camoさんCSSで調整することでアクティブな画像をより分かりやすくすることが可能なんだ。});});サムネイル付きのスライダーとして設定する場合、まずは2つのスライダーを設置します。それぞれのスライダーのナビゲーションとなるようasNavForに連動するスライダーのidやclassを指定します。サムネイルとなるスライダーにはサムネイルとして表示させる画像の枚数の設定とfocusOnSelectを有効化してサムネイルをクリックした際に連動してメインスライダーが動くようにします。camoさんslidesToShowに設定する枚数を奇数にして、centerModeを有効化にすることでアクティブなサムネイル画像を中央に配置するようにも出来るよ。});});verticalとverticalSwipingを有効化にすることで垂直にスライドします。スマホでは表示枚数を変更する(レスポンシブ対応)パソコン表示スマホ表示デモではパソコンでも簡単にスマホ表示が確認できるようにボタンで切り替えが出来るようにしてあります。実際にスマホで見ていただくと、どちらのボタンを押してもレスポンシブ設定した1枚のみ表示されます。});});responsiveを設定することでレスポンシブが有効になり、breakpointでブレイクポイントを設定してsettingsオブジェクトで各オプションを指定します。breakpointを複数設定することでパソコン・タブレット・スマホで表示を変えることが可能です。画面いっぱいに表示させるコンテンツ幅をはみ出して画面いっぱいにスライダーを設置したい場合がよくあるかと思います。分かりづらいですがコンテンツ幅と仮定する箇所に色を付けて分かりやすく表現してあります。hidden;で前後の画像が見えなくなっているだけなんですね。slickのさまざまな設置方法について代表的な設置方法をご紹介しましたが、slickスライダーの設置方法はオプションを使用すればまだまだ多くの設置方法があります。どのような設置方法があるのかを把握することでWeb制作の幅が広がります。おしゃれなフリーイラスト素材サイト2CSSで描く破線と点線の間隔を自由に調整する方法3jQueryスライダー「slick.js」による無限ループの設定方法4複数のタブ切り替えにも対応したjQueryを実装する方法5CSSだけで長い文字数を三点リーダー「...」で省略する方法(複数行にも対応)高鴨たかひこ【Webクリエイター】WebデザインやWebサイト制作を学んでいる方に役に立つ情報を発信しています。これまでの経験でインプットしてきた技術や知識をアウトプットすることで初学者やフリーランスを目指している人に有益なスキルをお届けしています。