hiroeleganceのエレガンスとは呼べない日常

WEB屋hiroelegance(ヒロエレガンス)のブログhiroeleganceのエレガンスとは呼べない日常略して「エレ日」です。YouTubeで毎週火曜0時にラジオを配信しています。ラジオの神様である伊集院光さんの深夜の馬鹿力に憧れて自己満ラジオやってます。

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>

私の作ったDEMO

codepen

スライダーを複数設置する場合

同時に動いてしまったので検索したところJSを書き換える必要があるそうです。
https://teratail.com/questions/93141

  広告

 - JavaScript, お仕事