jquery - 特定の詳細を含む 3 つの画像 (カルーセルなど) を示すスライドショー

Question

3 つの画像を表示するスライドショーを作成し、この Web サイトのものとまったく同じようにスライドさせる必要があります。

唯一の違いは、1 番目と 3 番目のスライドを透明にする必要があることです。そのため、中央 (アクティブ) のスライドのみが完全に表示され、キャプションのデザインが変更されます。

とにかく、いくつかの機能を備えた 'Cycle2' プラグインを試してみましたが、思ったように使用できませんでした (常に中央に配置し、他のスライドの側面を切り取るために)。

Answer 1

MovingBoxes プラグインが役立つ場合があります。

$(window).load(function() {
    var slideShowDelay = 4000, // 4000 millisecond = 4 seconds
            timer,
            mb = $('#slider').data('movingBoxes'),
            loop = function() {
        // if wrap is true, check for last slide, then stop slideshow
        if (mb.options.wrap !== true && mb.curPanel >= mb.totalPanels) {
            // click the button to pause
            $('button.slideshow').trigger('click');
            return;
        }
        // next slide, use mb.goBack(); to reverse direction
        mb.goForward();
        // run loop again
        timer = setTimeout(function() {
            loop();
        }, slideShowDelay);
    };
    // toggle slideshow button
    $('button.slideshow')
            .attr('data-mode', "false") // slideshow paused
            .click(function() {
        clearTimeout(timer);
        // slide show mode
        var mode = $(this).attr('data-mode') === "false",
                // button text, replace with <img> if desired
                button = mode ? "Pause" : "Play";
        if (mode) {
            loop();
        }
        $(this).attr('data-mode', mode).html(button);
    });
});

デモ