특정 세부 사항이있는 3 개의 이미지 (회전 목마와 같은)를 보여주는 슬라이드 쇼

Question

슬라이드 쇼를 만들어 세 이미지를 표시하고 정확히 한 슬라이드를 this website과 같이 슬라이드해야합니다.

유일한 차이점은 첫 번째와 세 번째 슬라이드가 투명해야하므로 가운데 (활성) 슬라이드 만 완전히 표시되고 캡션의 디자인이 변경된다는 것입니다.

어쨌든 몇 가지 기능이있는 '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); 
    }); 
}); 

Demo