Pickupニュース

bxSlider
jQueryプラグイン

bxSlider

レスポンシブ対応jQueryスライダー
bxSliderはレスポンシブに対応したjQueryコンテンツスライダーです。スライドショーについての多くのカスタマイズオプションが用意されています。
このページでは、bxSliderをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 bxSliderの導入

bxSliderのリンク(ファイルをダウンロードして利用する場合)

リンク先のDownloadをクリックして、ファイルをダウンロードします。

Webサイト

bxSliderフォルダの作成

bxSliderという名前のフォルダを新規作成し、そこにダウンロード・解凍後のjquery.bxsliderフォルダの中からjquery.bxslider.js(またはjquery.bxslid.miner.js)、jquery.bxslider.cssimagesフォルダを移動します。

HTMLのマークアップ

サーバーに作成したbxSliderフォルダをアップロードし、<head>グ内にjquery.bxslider.js(またはjquery.bxslid.miner.js)とjQueryまでのパス、jquery.bxslider.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/bxslider/jquery.bxslider.js"></script> <link href="path/bxslider/jquery.bxslider.css" rel="stylesheet" type="text/css">

bxSliderのリンク(CDNを利用する場合)

bxSliderはCDN配信サービスcdnjsでも配信されていますので、リンクを貼るだけでプラグインを利用することが出来ます。

HTMLのマークアップ

<head>タグ内にCDNで配信されているjquery.bxslider.js(またはjquery.bxslid.miner.js)とjQueryまでのパス、jquery.bxslider.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet" type="text/css">

基本的な使い方

bxSliderはスライダーを表示したい<ul>タグにクラス(ここではbxslider)を付与し、<li>タグ内に画像やビデオ、HTMLコンテンツ等を含めて使用します。

HTMLのマークアップ

HTMLCopy
<ul class="bxslider"> <li><img src="../images/photo01-m.jpg" /></li> <li><img src="../images/photo02-m.jpg" /></li> <li><img src="../images/photo03-m.jpg" /></li> <li><img src="../images/photo04-m.jpg" /></li> <li><img src="../images/photo05-m.jpg" /></li> <li><img src="../images/photo06-m.jpg" /></li> <li><img src="../images/photo07-m.jpg" /></li> <li><img src="../images/photo08-m.jpg" /></li> <li><img src="../images/photo09-m.jpg" /></li> <li><img src="../images/photo10-m.jpg" /></li> </ul>

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.bxslider').bxSlider();

デモ


        <div class="wrapper">
            <ul class="bxslider">
                <li><img src="../images/photo01-m.jpg" /></li>
                <li><img src="../images/photo02-m.jpg" /></li>
                <li><img src="../images/photo03-m.jpg" /></li>
                <li><img src="../images/photo04-m.jpg" /></li>
                <li><img src="../images/photo05-m.jpg" /></li>
                <li><img src="../images/photo06-m.jpg" /></li>
                <li><img src="../images/photo07-m.jpg" /></li>
                <li><img src="../images/photo08-m.jpg" /></li>  
                <li><img src="../images/photo09-m.jpg" /></li>
                <li><img src="../images/photo10-m.jpg" /></li>                                                
            </ul>
        </div>     
    

        .wrapper{
            max-width: 480px;
            margin: 0 auto;
        }
        .bxslider{
            margin: 0;
            padding: 0;            
        }
        img{
            width: 100%;
            height: auto;
        }
    

        $(function () {
            $('.bxslider').bxSlider();
        });
    
1 2

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください