jQuery

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

March 12, 2017

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

特徴

ナビゲーションボタン
Mousedownとmousemoveエフェクト

HTML

 <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~~