昨日のエントリーでswiperプラグインを使ってCoverflowを実現する方法を書きました。
でその場合のclickイベントを取得するにはどうすればいいのだろうか?
swiperプラグインのリファレンスによると下のような形でおkみたい。
<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
},
onClick:function(swiper, event){
}
});
});
</script>ずばりonClickパラメーターにコールバックすれば完了。
0 コメント:
コメントを投稿