<!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">
</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="https://hiroelegance.jp/js/swiper/img/img01.jpg" alt=""></div>
				        <div class="swiper-slide"><img src="https://hiroelegance.jp/js/swiper/img/img02.jpg" alt=""></div>
				        <div class="swiper-slide"><img src="https://hiroelegance.jp/js/swiper/img/img03.jpg" alt=""></div>
				        <div class="swiper-slide"><img src="https://hiroelegance.jp/js/swiper/img/img04.jpg" alt=""></div>
				        <div class="swiper-slide"><img src="https://hiroelegance.jp/js/swiper/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>
</body>
</html>
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;
}
	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
				}
			}
	    })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.