<!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.