勉強したことのメモ

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

  関連記事

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

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

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

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

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