新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

スライドショーで印象アップ!jsやjQuery等で作るおすすめプラグイン3種類

2019.3.10

スライドショーで印象アップ!jsやjQuery等で作るおすすめプラグイン3種類
Web制作 0 0

こちらの記事は、このような方におすすめです。

・JavaScriptやjQueryの扱いに慣れて、よりスキルアップを目指したい方
・ホームページに「スライドショー」の導入をご検討中の方

ホームページを作るときに、お客様やご利用者様にとって印象に残りやすい要素の一つが、トップページなどに用いられている「スライドショー」でしょう。

トップページは、ホームページを見始めるときに最初に閲覧する場合も多く、トップページ内で上部に置かれていることの多いスライドショーは、そのサイトのイメージを決める要素の一つと言えそうです。

今回は、おもにコーダーさん向けの「スライドショー作成のおすすめコード(プラグイン等)」です。

(一括りにするのが難しかったのでネーミングがあんまりよろしくないのはご容赦ください…。)

この記事の目次

その1:jQueryを用いたスライドショー用プラグイン[slick]

まずご紹介するのは[slick]です。

ダウンロードはこちらから。

こちらの[slick]は、私は個人的にはもっとも多く使用しているプラグインです。

こちらはスライドショーに使用できるのはもちろんですが、商品紹介で様々なアングルや箱の中身など細かく伝えるショッピング系サイトにも活用しやすいのが、おすすめポイントです。

スマートフォン版ではフリック(左右に指をこするような動作)でスライドの前後を切り替えられるのが個人的にお気に入りです。

下記のページでは、jQueryやCSSの参照の仕方や、HTMLタグの記述の仕方、そしてオプション的な変数の細かい設定方法なども紹介されています。

スライドショーを作る上での参考にどうぞ!

ページの先頭へ戻る

その2:jQueryで作るスライドショー[bxSlider]

こちらの[bxSlider]も、スライドショーを作る上で用いられることが多いプラグインです。

下記のページなどで、詳しい設定方法やオプションの変数なども細かく紹介されています。

レスポンシブ対応の有無を選べる変数もありますが、デフォルトで「true(対応する)」になっているので、気兼ねなく作業できます。

また、この変数を「false(対応しない)」にすることで、あえてレスポンシブ非対応としているホームページにも組み込みやすいのも特徴的です。

ページの先頭へ戻る

その3:レスポンシブWebサイトにも対応!スライドショーが作れる[Swiper]

3つ目は[Swiper]です。

jQueryではないjsコード等を参照しています。

スライド画像の、1個1個の変化の仕方のバリエーションも面白く、アクションで目を引きたい方にはおすすめです。

下記のページに実装方法が詳しく紹介されています。

ページの先頭へ戻る

お気に入りのスライドショー用プラグインを見つけて、ホームページ制作のバリエーションを広げてみてください(^^)

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ