amazonプライム・ビデオのようなカルーセルを実装。高機能スライダー「Swiper」
2019/03/05
お仕事でamazonプライム・ビデオのようなカルーセルを実装しました。
今回備忘録です。
参考にした記事
https://www.willstyle.co.jp/blog/724/
こちらのデモを元に作成しました。
https://www.willstyle.co.jp/DEMO/20170303/content03.html
コピペで動く例文
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>primeおすすめTV番組風</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="robots" content="index,follow">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<style>
body{background:#0F171E;}
h2{color:#fff;}
.mb60{
margin-bottom: 60px;
}
.swiper-container{
text-align: center;
}
.swiper-container .swiper-slide img{
max-width: 100%;
height: auto;
}
.prettyprint{
border: none;
background: #fafafa;
color: #697d86;
}
</style>
</head>
<body>
<div id="page">
<div id="contents">
<div class="jumbotron">
<div class="container">
<h2>primeおすすめTV番組</h2>
</div>
</div>
<div class="container">
<!-- Slider main container -->
<div class="swiper-container mb60">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/img01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/img02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/img03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/img04.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/img05.jpg" alt=""></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div><!-- / #contents -->
<footer id="footer">
</footer><!-- / #footer -->
</div><!-- #page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
slidesPerView: 5,
spaceBetween: 10,
centeredSlides : true,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
767: {
slidesPerView: 1,
spaceBetween: 0
}
}
})
</script>
</body>
</html>
codepen
スライダーを複数設置する場合
同時に動いてしまったので検索したところJSを書き換える必要があるそうです。
https://teratail.com/questions/93141