【jQuery】キューブエフェクトのあるレスポンシブカルーセルCubeCarrousel
jQuery

CubeCarrouselはキューブエフェクトのあるレスポンシブjQueryカルーセル。
特徴
<div id="midiv"> <div class="wrapper"> <div class="sliderWrapper"> <div class="item sliderLeft"> <img src="http://placehold.it/900x400" /> </div> <div class="item sliderCenter"> <img src="http://placehold.it/900x400" /> </div> <div class="item sliderRight"> <img src="http://placehold.it/900x400" /> </div> <div class="item"> <img src="http://placehold.it/900x400" /> </div> <div class="item"> <img src="http://placehold.it/900x400" /> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script> function SetPosition(){ $('.wrapper').each(function(){ $(this).height(function(){ var quarter = ($(this).width()/4); return quarter + (quarter/2) ; }); var translateZ = ($(this).width()/2) ; $(this).children('.sliderWrapper') .css({"-webkit-transform":"translateZ(-"+translateZ+"px) "}); $(this).find('.item') .css({"-webkit-transform":"translateZ(-"+translateZ+"px) rotateY(0deg)"}); $(this).find('.item.sliderRight') .css({"-webkit-transform":"rotateY( 90deg ) translateZ("+translateZ+"px) rotateY(180deg)"}); $(this).find('.item.sliderLeft') .css({"-webkit-transform":"rotateY( -90deg ) translateZ("+translateZ+"px) rotateY(180deg)"}); $(this).find('.item.sliderCenter') .css({"-webkit-transform":"rotateY( 0deg ) translateZ("+translateZ+"px)"}); }); } $(function(){ SetPosition(); $(window).resize(function(event){ SetPosition(); }); setInterval(function(){ $('.wrapper').find('.sliderLeft').removeClass('sliderLeft'); $('.wrapper').find('.sliderCenter').removeClass('sliderCenter').addClass('sliderLeft'); $('.wrapper').find('.sliderRight').removeClass('sliderRight').addClass('sliderCenter'); var nextc = $('.wrapper').find('.sliderCenter').next('div'); if( nextc.length != 1 ) nextc = $('.wrapper').find('.item').not('.sliderLeft,.sliderCenter,.sliderRight').first(); nextc.addClass('sliderRight'); SetPosition(); },4000); }); </script>
MIT
Download