勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

   2024/01/12  jQuery

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるしlightboxとかと組み合わせて使うのもいい感じ。オプションが豊富なのもいい感じ。以下に利用方法のメモ。

 

ダウンロード先

http://bxslider.com/

CDNを使う場合は以下を参照。

https://cdnjs.com/libraries/bxslider

 

サンプル

https://taitan916.info/sample/bxslider/

 

ソース

<html>
<head>
    <title>bxsliderの実験</title>
</head>
<body>
    <ul class="bxslider" id="bxslider">
        <li><img src="001.jpg"></li>
        <li><img src="002.jpg"></li>
        <li><img src="003.jpg"></li>
    </ul>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function(){
        $('.bxslider').bxSlider({
            slideWidth: 150, 
            touchEnabled: false,
            slideMargin: 10,
            auto:true,
            controls: false,
            infiniteLoop: true, 
        });
    });
    </script>
</body>
</html>

 - jQuery

  関連記事

jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...