【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。2.0【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。ONZEhttps://on-ze.com/archives/1658HomeBlog【jQuery】超簡単jQueryスライダー[bxSlider]の使い方。プラグイン[bxSlider]はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。サンプルをご覧ください。bxSlider:サンプル・デモ特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の1つです。実装方法は以下のとおり。最初に[bxSlider]の本体ファイルをダウンロードします。bxSlider:ダウンロードフォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの[jquery.bxslider.min.js]とスタイルシートの「jquery.bxslider.css」の2つ。当然ですがスタイルシートの[jquery.bxslider.css]は中身のコードをコピーしてメインのCSSに貼り付けてしまえば不要になります。ここでスライダーの設定も合わせて記述します。3});});</script>とりあえず今回は「自動でスライド」「コンテンツの横幅は640px」「最小スライド数が3点」というオプションを設定してみました。続いてメインのスライドショーになる部分の記述方法です。height="300"></li></ul>リストを使った簡単なマークアップですね。ここではスライドショーの本体となる[ul]要素にクラス名[.bxslider]を指定し、スライダーで切り替えたい画像を[li]要素で記述しています。スライドさせたいリストは好みの数に増やしてOKです。以上で[bxSlider]が動くようになります。細かなデザイン部分はすべて、もともと同梱されているスタイルシート[jquery.bxslider.css]が司っています。ページ送りやサムネイルの設定をした際には、ブラウザで「要素を検証」すると、[.bx-controls]や[.bx-pager]などのクラス名が追加された要素が吐き出されていることを確認できるので微調整してください。各オプション設定の詳細は以下のとおり。現状のすべての項目を網羅しています。Generalmode横スライド、縦スライド、フェードイン・アウトを選べます。speedスライドのスピードをミリ秒単位で指定できます。slideMarginスライダーのコンテンツ部のマージンを指定できます。