logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

jQueryスライドショーbxsliderについて

インストールから設置、オプションの指定まで

まずはbxslider公式サイトから、必要なファイルをダウンロードします。次に、ダウンロードしたファイルやフォルダを、スライダーをつけたいサイトのサーバーにアップします。Headにファイルへのリンクを記述すれば準備は完了です。

スライドさせたい要素を準備したら、HTMLに記述していきます。この時、ulで囲むのが一般的です。また、要素はいくつでも増やすことができます。最後に関数の呼び出しを記述すれば完成です。

さらに、オプションを利用すると自由にカスタマイズすることができます。公式ページには沢山のオプションが紹介されています。一部紹介しますと、横スライド・縦スライド、スライドショーのスピード、ランダム表示、タッチ操作などがあります。他にも魅力的なオプションがありますので、目的に応じて利用してみましょう。公式サイトにサンプルが公開されていますので、そちらも参考にしてください。

レスポンシブにも対応

レスポンシブ対応しているというのも、大きな魅力です。レスポンシブとは、Webサイトをパソコンやスマートフォンなど様々な画面サイズに合わせて、デザインを崩さずに見やすいサイトにすることをいいます。最近は、スマートフォンで表示させることを重要視する傾向があるので、このレスポンシブ対応はうれしい機能です。CSSでレスポンシブ用に指定すれば、ブラウザのサイズに合わせて拡大・縮小させることができます。さらに、スマートフォンでスワイプが可能なことも見逃せない機能です。

このように、bxsliderを使うと簡単にjQueryスライドショーを設置することができるのです。