12

ブートストラップのカルーセルを使用して、コンテンツ (検索結果など) を動的にスクロールしたいと考えています。そのため、何ページのコンテンツがあるかわかりません。また、ユーザーが次のボタンをクリックしない限り、次のページを取得したくありません。

私はこの質問を見ました: Carousel with dynamic contentですが、DB サーバー側からすべてのコンテンツ (その場合は画像) をロードし、すべてを静的コンテンツとして返すように見えるため、答えは当てはまらないと思います。

私の最善の推測は、ボタンを押したときにクリック イベントをインターセプトし、検索結果の次のページに対して ajax 呼び出しを行い、ajax 呼び出しが返されたときにページを動的に更新してから、カルーセルのスライド イベントを生成することです。しかし、ブートストラップ ページで実際に議論または文書化されているものはありません。どんなアイデアでも大歓迎です。

4

2 に答える 2

0

@Zimの回答をBootstrap 4と組み合わせました。誰かの役に立てば幸いです。

まず、画像のパスだけをロードします。

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item" data-url="/image/1.png"></div>
        <div class="carousel-item" data-url="/image/2.png"></div>
        <div class="carousel-item" data-url="/image/3.png"></div>
    </div>
</div>

次にJavaScriptで：

$('document').ready(function () {
    const loadCarouselImage = function ($el) {
        let url = $el.data('url');
    
        $el.html(function () {
            let $img = $('<img />', {
                'src': url
            });
            $img.addClass('d-block w-100');
                    
            return $img;
        });
    );

    const init = function () {
        let $firstCarousel = $('#carousel .carousel-item:first');
        loadCarouselImage($firstCarousel);
        $firstCarousel.addClass('active');

        $('#productsCarousel').carousel({
            interval: 5000
        });
     };

     $('#carousel').on('slid.bs.carousel', function () {
         loadCarouselImage($('#carousel .carousel-item.active'));
     });

     init();
});
于 2020-08-16T11:25:21.037 に答える