<!-- Swiperここから -->
  <div class="swiper-container">
    <!-- メイン -->
    <div class="swiper-wrapper">
      <!-- 各スライド -->
      <div class="swiper-slide slide1">slide 1</div>
      <div class="swiper-slide slide2">slide 2</div>
      <div class="swiper-slide slide3">slide 3</div>
      <div class="swiper-slide slide4">slide 4</div>
    </div>

    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
      
    <!-- 次へボタンと戻るボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <!-- Swiperここまで -->

  <!-- ライブラリ読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
.swiper-container {

	/* 全体のスタイル */
	.swiper-wrapper {
		width: 100%;
		height: 250px;

		/* 各スライダーのスタイル */
		.swiper-slide {
			color: #ffffff;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 250px;
		}

		/* それぞれのスライダーの背景色 */
		.slide1 {
			background-color: red;
		}

		.slide2 {
			background-color: blue;
		}

		.slide3 {
			background-color: green;
		}

		.slide4 {
			background-color: orange;
		}
	}
}
View Compiled
var mySwiper = new Swiper ('.swiper-container', {
  /* エフェクトを設定 */
  effect: "flip",
  /* 最後のスライドに達すると、続けてスライド可能 */
  loop: true,
  /* ページネーション、次へボタン、戻るボタンを設定 */
  pagination: '.swiper-pagination',
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.