勉強したことのメモ

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

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

   2024/05/19  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

  関連記事

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

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

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

jQueryの画像スライダー用プラグイン「slick」の使い方

jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...