あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

では、わたくしはいつかの小さなみだしをつけながら、
しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

HTML


<div class="sample sample02">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br class="u-d-n u-d-i-md">うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="sample02-inner">
          <p>では、わたくしはいつかの小さなみだしをつけながら、<br class="u-d-n u-d-i-md">しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p>
        </div>
      </div>
    </div>
      
    <div class="swiper-button-prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
        <path class="c-arrow c-arrow-prev" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
      </svg>
    </div>
    <div class="swiper-button-next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
        <path class="c-arrow c-arrow-next" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
      </svg>
    </div>

    <div class="swiper-pagination"></div>
  </div>
</div><!-- .sample -->

CSS


.sample02 .swiper-wrapper {
  align-items: stretch;
}

.sample02 .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-bottom: 25px;
}

.sample02 .sample02-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.sample02 .swiper-button-prev,
.sample02 .swiper-button-next {
  display: none;
  width: 20px;
  height: 32.58px;
  fill: #666;
  stroke: none;
  stroke-width: 0;
  background-image: none;
  z-index: 10000;
}

.sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0;
}

.sample02 .swiper-pagination-bullet-active {
  background: #666;
}

@media (min-width: 768px) {
  .sample02 .swiper-slide {
    padding: 50px;
  }

  .sample02 .swiper-button-prev,
  .sample02 .swiper-button-next {
    display: block;
  }

  .sample02 .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 10px;
  }
}

JavaScript


window.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.sample02 .swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    loop: true,
    speed: 1000,
    autoplay: 3000,
    spaceBetween: 10,
    effect: 'coverflow'
  });
}, false);