jqueryのスライドショー「bxSlider」の設置方法!

公開日:2014年7月17日
最終更新日: 2015年2月27日

jquery_bxslider_photo_01

こんにちは!

最近、jqueryのスライドショー「bxSlider」を設置する機会がありましたので、今回はその設置方法をご紹介したいと思います。

実際に使ってみた感想は、設置は簡単ですし、かなり使い勝手が良かったです。しばらく、jqueryのスライドショーは「bxSlider」をデフォルトで使用してもいいかなと思います。

目次!

1.「bxSlider」とは?
2.設置方法とデモページ!
3.対応ブラウザ!
4.色々なカスタマイズ!

「bxSlider」とは?

初心者の方でも簡単に設置できるjqueryのスライドショーで、レスポンシブWEBデザインにも対応しています。画像だけでなく、動画なども読み込むことができます。

世の中にはたくさんのjqueryのスライドショーがありますが、カスタマイズ次第で「bxSlider」でほとんど対応可能だと思います。

設置方法とデモページ!

「bxSlider」のサイトよりファイルをダウンロード!

以下のURLにアクセスしてください。

「bxSlider」のサイトが開きますので「Download」をクリックしてください。

jquery_bxslider_photo_02

「jquery.bxslider.zip」ファイルがダウンロードされますので解凍してください。全てのファイルを使用するわけではありません。

jquery_bxslider_photo_03

jsの設置!

解凍した必要jsファイルをhead部分に読み込んでください。「src」のパスは各環境に合わせてください。

<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

CSSの設置!

解凍した必要CSSファイルをhead部分に読み込んでください。「src」のパスは各環境に合わせてください。

<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">

上記のjsとCSSを記述したhtml!

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><img src="common/img/sample_01.jpg" /></li>
    <li><img src="common/img/sample_02.jpg" /></li>
    <li><img src="common/img/sample_03.jpg" /></li>
    <li><img src="common/img/sample_04.jpg" /></li>
  </ul>
</div>
</body>

</html>

以上で設定完了です。簡単ですよね。
デモページとサンプルファイルも用意しましたので、ご確認ください。

デモページ!

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

対応ブラウザ!

下記のブラウザで動作チェック済です。

Google Chrome(Windows)
Firefox(Windows)
Safari(Windows)
Internet Explorer 10(Windows)
Internet Explorer 9(Windows)
Internet Explorer 8(Windows)

色々なカスタマイズ!

「bxSlider」の表示方法にも色々あります。
以下は主に使用頻度が高そうなカスタマイズになります。

キャプション付きのスライドショー!

各写真にキャプションを付けることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'fade',
    captions: true
  });
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><img src="common/img/sample_01.jpg" title="sample01のキャプション" /></li>
    <li><img src="common/img/sample_02.jpg" title="sample02のキャプション" /></li>
    <li><img src="common/img/sample_03.jpg" title="sample03のキャプション" /></li>
    <li><img src="common/img/sample_04.jpg" title="sample04のキャプション" /></li>
  </ul>
</div>
</body>

</html>

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

スタートとストップボタン付きのスライドショー!

スタートとストップボタンを付けることができます。スタートを押すと自動でスライドが始まります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    auto: true,
    autoControls: true
  });
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><img src="common/img/sample_01.jpg" /></li>
    <li><img src="common/img/sample_02.jpg" /></li>
    <li><img src="common/img/sample_03.jpg" /></li>
    <li><img src="common/img/sample_04.jpg" /></li>
  </ul>
</div>
</body>

</html>

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

画像の高さに合わせて表示するスライドショー!

画像の高さを自動的に合わせてスライドできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    adaptiveHeight: true,
    mode: 'fade'
  });
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><img src="common/img/sample_05.jpg" /></li>
    <li><img src="common/img/sample_06.jpg" /></li>
    <li><img src="common/img/sample_07.jpg" /></li>
  </ul>
</div>
</body>

</html>

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

縦にスライドするスライドショー!

画像が縦にスライドします。流れの紹介などに使用できそうです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'vertical',
    slideMargin: 5
  });
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><img src="common/img/sample_01.jpg" /></li>
    <li><img src="common/img/sample_02.jpg" /></li>
    <li><img src="common/img/sample_03.jpg" /></li>
    <li><img src="common/img/sample_04.jpg" /></li>
  </ul>
</div>
</body>

</html>

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

ダイナミックに横にスライドするスライドショー!

画像がダイナミックに横にスライドします。「jquery.easing.1.3.js」を新たに読み込む必要がありますので、ご注意ください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    mode: 'horizontal',
    useCSS: false,
    infiniteLoop: false,
    hideControlOnEnd: true,
    easing: 'easeOutElastic',
    speed: 2000
  });
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><img src="common/img/sample_01.jpg" /></li>
    <li><img src="common/img/sample_02.jpg" /></li>
    <li><img src="common/img/sample_03.jpg" /></li>
    <li><img src="common/img/sample_04.jpg" /></li>
  </ul>
</div>
</body>

</html>

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

動画を横にスライドするスライドショー!

動画を横にスライドします。「jquery.fitvids.js」を新たに読み込む必要がありますので、ご注意ください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/jquery.bxslider.css" type="text/css" media="all">
<script type="text/javascript" src="common/js/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="common/js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    video: true,
    useCSS: false
  });
});
</script>
</head>

<body>
<div id="page">
  <ul class="bxslider">
    <li><iframe width="400" height="250" src="//www.youtube.com/embed/eELaIAjK16g" frameborder="0" allowfullscreen></iframe></li>
    <li><iframe width="400" height="250" src="//www.youtube.com/embed/0-SsrXgb7Fk" frameborder="0" allowfullscreen></iframe></li>
  </ul>
</div>
</body>

</html>

上記の設定をしたデモページを作成しました。

デモページのサンプルファイルはこちらよりダウンロードできます。

上記以外にもカスタマイズが可能です。こちらより確認できます。

最後に!

レスポンシブWEBデザインにも対応していますし、私的にはjqueryのスライドショー「bxSlider」が気に入りました。これからもっと色々な場面で使用していきたいと思います。使用したことがない方は、本当に設置も簡単なので、ぜひ一度お試しください。

今、レスポンシブWEBデザインのhtmlテンプレートを作っているので、トップイメージは「bxSlider」を使用してみます。

以上「jqueryのスライドショー「bxSlider」の設置方法!」でした!

それではまた。

公開日:2014/07/17
最終更新日: 2015年2月27日
カテゴリー:jquery・js

関連記事

新着記事

コメント/トラックバック (4件)

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい * Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly