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

画像のスライダーを作る時に便利なプラグインである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>