swiperプラグインでCoverflowを実現するにはどうすればいいのだろうか?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.jquery.min.js"></script> <style> .swiper-container { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; } </style> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div> <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <script> jQuery(function($){ new Swiper('.swiper-container', { pagination: '.swiper-pagination', effect: 'coverflow', grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true } }); }); </script>
0 コメント:
コメントを投稿