夢みるゴリラ
夢みるゴリラ

Swiperを使った
パララックススライダー

SLIDER001

Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa. The genus Gorilla is divided into two species: the eastern gorillas and the western gorillas (both critically endangered), and either four or five subspecies. They are the largest living primates.

SLIDER002

The DNA of gorillas is highly similar to that of humans, from 95 to 99% depending on what is included, and they are the next closest living relatives to humans after the chimpanzees and bonobos.

SLIDER003

Gorillas' natural habitats cover tropical or subtropical forests in Sub-Saharan Africa. Although their range covers a small percentage of Sub-Saharan Africa, gorillas cover a wide range of elevations.

SLIDER004

The word "gorilla" comes from the history of Hanno the Navigator, (c. 500 BC) a Carthaginian explorer on an expedition on the west African coast to the area that later became Sierra Leone.

SLIDER005

The American physician and missionary Thomas Staughton Savage and naturalist Jeffries Wyman first described the western gorilla (they called it Troglodytes gorilla) in 1847 from specimens obtained in Liberia.

headに書くこと

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

JavaScriptで書くこと

window.addEventListener('load', () => {
    const sliderTarget = '.js-slider';
    const navSliderTarget = '.js-slider-nav';

    const sliderElem = document.querySelector(sliderTarget);
    const navSliderElem = document.querySelector(navSliderTarget);

    if (sliderElem === null && navSliderElem === null) return;

    const sliderParams = {
      loop: true, // ループさせる
      loopAdditionalSlides: 10, // ループのときに作られるクローンの枚数。
      parallax: true, // パパラックスさせる
      allowTouchMove: false, // マウスでのスワイプを禁止
    };

    const navSliderParams = {
      loop: true,
      loopAdditionalSlides: 10,
      speed: 1200,
      autoplay: {
        delay: 3000, // ３秒後に次のスライドへ
        disableOnInteraction: false, // ユーザー側で操作してもスライドを止めない
      },
      slidesPerView: 3, // 画面状で見れるスライドの枚数を指定
      centeredSlides: true, // アクティブのスライドを中央にする
      allowTouchMove: false, // マウスでのスワイプを禁止
      slideToClickedSlide: true, // スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する
      navigation: {
        // 左右のページ送りを有効にする
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    };

    const slider = new Swiper(sliderTarget, sliderParams);
    const navSlider = new Swiper(navSliderTarget, navSliderParams);

    slider.controller.control = navSlider; // メインスライダーとナビの紐付け
    navSlider.controller.control = slider; // ナビとメインスライダーの紐付け
  });

CSSで書くこと

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
.swiper-container {
  overflow: hidden;
  position: relative;
}
.d-demo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-bottom: 60px;
}
.d-demo__heading {
  width: 20%;
  position: relative;
}
.d-demo__ttl {
  width: 20%;
  max-width: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.d-demo__slider {
  width: 80%;
}
.d-demo__slide {
  width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.swiper-container-main {
  height: calc(100vh - 216px);
  transition: opacity 0.6s ease, transform 0.3s ease;
}
.d-demo__slide-heading {
  position: absolute;
  top: 32%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}
.d-demo__slide-ttl {
  font-size: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  margin-bottom: 30px;
}
.d-demo__slide-txt {
  font-size: 13px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  transform: translateX(50px);
}
.swiper-container-nav {
  width: 50%;
  height: 13%;
  position: absolute;
  right: 0;
  bottom: 3.5%;
  z-index: 10;
}
.d-demo__nav {
  cursor: pointer;
}
.d-demo__nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__nav:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.55);
  transition: background-color 0.3s ease;
  content: '';
  z-index: 1;
  transform:translateZ(1px); //safari対策
}
.swiper-slide-active.d-demo__nav:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav:hover:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav-heading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 15px;
}
 .swiper-container-nav .swiper-button-prev,
  .swiper-button-next {
    --swiper-navigation-size: 12px;
    background-color: #fff;
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

HTMLで書くこと

<div class="d-demo">
  <div class="d-demo__heading">
    <h1 class="d-demo__ttl"><img src="./images/img-swiper-parallax-main-ttl.svg" alt=""></h1>
  </div>
  <div class="d-demo__slider">
    <div class="swiper-container swiper-container-main js-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide d-demo__slide">
          <div class="d-demo__slide-bg" style="background-image: url('./images/img-parallax-swiper-img01.jpg');" data-swiper-parallax-x="90%"></div>
          <div class="d-demo__slide-heading">
            <h3 class="d-demo__slide-ttl">SLIDER001</h3>
            <p class="d-demo__slide-txt" data-swiper-parallax-x="30%" data-swiper-parallax-opacity="0">
              Gorillas are ground-dwelling, predominantly herbivorous apes
              that inhabit the forests of central Sub-Saharan Africa. The
              genus Gorilla is divided into two species: the eastern
              gorillas and the western gorillas (both critically
              endangered), and either four or five subspecies. They are
              the largest living primates.
            </p>
          </div>
        </div>
        <div class="swiper-slide d-demo__slide">
          <div class="d-demo__slide-bg" style="background-image: url('./images/img-parallax-swiper-img02.jpg');" data-swiper-parallax-x="90%"></div>
          <div class="d-demo__slide-heading">
            <h3 class="d-demo__slide-ttl">SLIDER002</h3>
            <p class="d-demo__slide-txt" data-swiper-parallax-x="30%" data-swiper-parallax-opacity="0">
              The DNA of gorillas is highly similar to that of humans,
              from 95 to 99% depending on what is included, and they are
              the next closest living relatives to humans after the
              chimpanzees and bonobos.
            </p>
          </div>
        </div>
        <div class="swiper-slide d-demo__slide">
          <div class="d-demo__slide-bg" style="background-image: url('./images/img-parallax-swiper-img03.jpg');" data-swiper-parallax-x="90%"></div>
          <div class="d-demo__slide-heading">
            <h3 class="d-demo__slide-ttl">SLIDER003</h3>
            <p class="d-demo__slide-txt" data-swiper-parallax-x="30%" data-swiper-parallax-opacity="0">
              Gorillas' natural habitats cover tropical or subtropical
              forests in Sub-Saharan Africa. Although their range covers a
              small percentage of Sub-Saharan Africa, gorillas cover a
              wide range of elevations.
            </p>
          </div>
        </div>
        <div class="swiper-slide d-demo__slide">
          <div class="d-demo__slide-bg" style="background-image: url('./images/img-parallax-swiper-img04.jpg');" data-swiper-parallax-x="90%"></div>
          <div class="d-demo__slide-heading">
            <h3 class="d-demo__slide-ttl">SLIDER004</h3>
            <p class="d-demo__slide-txt" data-swiper-parallax-x="30%" data-swiper-parallax-opacity="0">
              The word "gorilla" comes from the history of Hanno the
              Navigator, (c. 500 BC) a Carthaginian explorer on an
              expedition on the west African coast to the area that later
              became Sierra Leone.
            </p>
          </div>
        </div>
        <div class="swiper-slide d-demo__slide">
          <div class="d-demo__slide-bg" style="background-image: url('./images/img-parallax-swiper-img05.jpg');" data-swiper-parallax-x="90%"></div>
          <div class="d-demo__slide-heading">
            <h3 class="d-demo__slide-ttl">SLIDER005</h3>
            <p class="d-demo__slide-txt" data-swiper-parallax-x="30%" data-swiper-parallax-opacity="0">
              The American physician and missionary Thomas Staughton
              Savage and naturalist Jeffries Wyman first described the
              western gorilla (they called it Troglodytes gorilla) in 1847
              from specimens obtained in Liberia.
            </p>
          </div>
        </div>
      </div>
      <!-- If you need navigation buttons-->
      <!-- <div class="swiper-button-prev swiper-button-white"></div>-->
    </div>
    <!-- /本体swiper-->
    <!-- サムネイルswiper-->
    <div class="swiper-container swiper-container-nav js-slider-nav" style="--swiper-navigation-color: #000">
      <div class="swiper-wrapper" role="navigation">
        <div class="swiper-slide d-demo__nav">
          <div class="d-demo__nav-bg" style="background-image: url('./images/img-parallax-swiper-img01.jpg');">
            <div class="d-demo__nav-heading">
              <p class="d-demo__nav-ttl">SLIDER001</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide d-demo__nav">
          <div class="d-demo__nav-bg" style="background-image: url('./images/img-parallax-swiper-img02.jpg');">
            <div class="d-demo__nav-heading">
              <p class="d-demo__nav-ttl">SLIDER002</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide d-demo__nav">
          <div class="d-demo__nav-bg" style="background-image: url('./images/img-parallax-swiper-img03.jpg');">
            <div class="d-demo__nav-heading">
              <p class="d-demo__nav-ttl">SLIDER003</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide d-demo__nav">
          <div class="d-demo__nav-bg" style="background-image: url('./images/img-parallax-swiper-img04.jpg');">
            <div class="d-demo__nav-heading">
              <p class="d-demo__nav-ttl">SLIDER004</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide d-demo__nav">
          <div class="d-demo__nav-bg" style="background-image: url('./images/img-parallax-swiper-img05.jpg');">
            <div class="d-demo__nav-heading">
              <p class="d-demo__nav-ttl">SLIDER005</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <!-- /サムネイルswiper-->
  </div>
</div>