jQueryをつかってスライダーを導入してみよう

みなさんはjQueryという言葉を知っていますか？言葉を知らなくてもこのjQueryをつかったサイトをよく見かけるはずです。例えば、ちょっと複雑な動きをするものはだいたいこのjqueryが使われています。今回はそんなjqueryについて、そしてスライダーを導入する方法の記事を書いていきます。

jQueryとは？

jQueryとは、プログラム言語である「JavaScript」をより扱いやすくしたファイルであり、軽量化されたJavaScriptライブラリです。プログラミングをしている方はJavaScriptという単語を聞いたことがあるはずです。ライブラリとは使用頻度が高いプログラムを再利用できるようにまとめたものです。JavaScriptのコードを少なく記述できるのは、jpueryがまとめているためです。jQueryのタイトルにもある「write less, do more.」の通りですね。すぐにjQueryを試したい場合は、本家でjQuery本体をダウンロードしてみてください。

jQueryでできることとは？

例えば、プラグイン本体を設置することによりこの記事のタイトルにもあるスライダーをサイトに反映させることができます。他にも、よく見かけるのはスムーズにtopに戻るボタンや、ページを移動する際のモーション、画像をクリックしたら大きく表示されるモーションなど、様々です。少し複雑な動きをするものは大体jQueryで動いているものです。jQueryプラグインを配布しているサイトはたくさんありますので、気に入ったプラグインを探してみると楽しいのではないかと思います。

jQueryのメリット

・コード量が少なく済む
上記で説明したように、JavaScriptの莫大な量のコードを少ないコードで同じように表現することができます。そのため、効率よく作業することができます。開発は特に、莫大なコードだと作業効率が落ちてしまったり、エラーなど起きやすくなってしまいます。コード量が少なければそれを防ぐことが可能です。

・様々なブラウザに対応することが可能
JavaScriptの場合、ブラウザごとにコードを変えなければなりません。しかし、jQUeryなら最初から様々なブラウザに対応するために作られているため、書き換える必要はありません。環境に左右されることがないので、それだけでも、時間を使うことがなく作業効率が上がりますね。

・プラグインが豊富
上記でも説明したように、便利なプラグインが様々なサイトで配布されています。使いやすいものや、見栄えのいいものなど、高機能なプラグインをサイトに実装することができます。

jQueryのデメリット

・処理が遅い場合がある
JavaScriptよりコードを少なく軽量化されているため、読み込みに時間がかかる場合があります。

・理解していないと裏でどう動いているかわからない
粗悪なコードがあったとしても、jQueryだけでは分かりません。JavaScriptの知識も必要となってきます。

便利なjQueryですが、デメリットもあることが分かりました。コードに慣れていない方にはjQueryはコードも少なく分かりやすく学習しやすいですが、それと同時にJavaScriptの知識も必要となります。jQueryで学びつつ、JavaScriptに触れる機会が出来るとなお良いのではないかと思います。

スライドショーを導入してみよう

では、jQueryを使ってスライダーを導入してみましょう。スライダーのプラグインは沢山あります。様々なサイトで配布されているので是非覗いてみて下さい。今回は、初心者でも導入しやすいスライダーを使います。jQuery入門にはおすすめのプラグインです。

bxSlider
初心者でも設定がしやすく、簡単に導入できます。様々なオプションがあり、レスポンシブにも対応しており、スマホやタブレットの場合は難しいコードを書かなくても勝手に縮小してくれます。初心者にはおすすめのスライダーです。

bxsliderの設置方法

まず、ホームページでjQueryファイルであるbxsliderをダウンロードします。
英語のサイトなので分かりにくいですが、右上にダウンロードボタンがあります。

次にダウンロードしたフォルダを開くと、中にいくつかのjsファイルがあるのが分かります。その中で使うものは、スクリプトの「jquery.bxslider.min.js」とスタイルシートの「jquery.bxslider.css」の２つです。
indexやcssのある階層と同じところにJSフォルダを作り、中に上の２つのファイルを入れます。

次に、コードを書いていきましょう。
まずHTMLファイルの<header></header>内にスプリクトとスタイルシートを呼び出す記述をします。jQueryのバージョンに注意しましょう。

<link href=”/js/jquery.bxslider.css”  rel=”stylesheet” >
<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”></script>
<script src=”/js/jquery.bxslider.min.js”></script>

これで呼び出す記述は出来ました。

次にJavaScriptを呼び出す記述です。

<script type=”text/javascript”>
$(document).ready(function(){
$(‘.bxslider’).bxSlider();
});
</script>

これを入れることによりスライダーが動きます。書き忘れないように注意しましょう。

次にHTMLのメインに表示させたいものを書き込んでいきます。

<ul class=”bxslider”>
<li><img src=”/img/01.png”></li>
<li><img src=”/img/02.png”></li>
<li><img src=”/img/03.png”></li>
</ul>

スライドショーの本体をulで指定し、表示させたい画像をliで指定しています。今回は3枚だけですが、liを増やせば表示できる画像を増やすことができます。

以上で、画像が表示され、スライダーが動くはずです。とても簡単ですね。
これだけでなく、さらにカスタマイズすることも可能です。

例えば、スライダーを自動的に動かしたい場合は、

<script type=”text/javascript”>
$(document).ready(function(){
 $(‘.bxslider’).bxSlider();
auto: true
});
</script>

と要素を追記するだけで、自動的にスライダーが変わります。
また、スライダーのボタンなども複雑になりますが、CSSで変更可能です。他にも様々カスタマイズ方があるので、是非試してみてください。

まとめ

いかがでしたでしょうか？一見難しそうなスライダーの導入ですが、思っていたより簡単だということが分かりましたね。動きのあるWEBサイトを作成するにはjQueryは必須となります。
良いWEBサイトを作れるように、jQueryをこれからも学んでいきたいと思います。

マーケティングでお悩みでしたら、
Bigmacにお任せください。