勉強したことのメモ

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 ...

lightboxをファイルアップロードなしで使う(CDN)方法

本番実装時ならともかく、テスト用とかでlightboxみたいによく使うプラグイン ...

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

Lightboxで画像拡大時に閉じるボタンの位置を右上に変更

Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...