Home > Javascript > Swiper.jsで遷移ボタンをスライドの外に出して複数設置する

Swiper.jsで遷移ボタンをスライドの外に出して複数設置する

公開日: 2020/01/07

最終更新日: 2020/1/7

swiper.jsで遷移ボタンを外側に出して複数設置したら、全部まとめて動くのでその辺りを調整しました。

まず、swiper.jsとcssを読み込んでください

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

1 2	<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

npmは

$ npm install swiper

1	$ npm install swiper

まずは普通に設置

普通にswiper.jsを設置してます

Demo

デモはこちら

Html

  <!-- Slider main container -->
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide"><img src="images/slider_image1.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/slider_image2.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/slider_image3.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>

css

swiperの横と縦の大きさって感じですね

  .swiper-container {
    width: 90vw;
    height: 90vh;
    position: relative;
    overflow: hidden;
  }
  
  .swiper-container img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
  }

.swiper-container {

width: 90vw;

height: 90vh;

position: relative;

overflow: hidden;

}

.swiper-container img {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

max-width: 100%;

max-height: 100%;

min-width: 100%;

min-height: 100%;

}

js

普通に設置してます。
オプションに関してはswiper.jsのapiをご参照ください

    var mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      loop: true, //最後まで行ったら最初のスライド
      autoplay: { //自動でスライドする
        delay: 3000, //秒数
        disableOnInteraction: true //上にカーソル置いたら止まる
      },

      // If we need pagination
      pagination: { //ページネーション
        el: '.swiper-pagination',
      },

      // Navigation arrows
      navigation: { //遷移ボタン
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

var mySwiper = new Swiper('.swiper-container', {

// Optional parameters

loop: true, //最後まで行ったら最初のスライド

autoplay: { //自動でスライドする

delay: 3000, //秒数

disableOnInteraction: true //上にカーソル置いたら止まる

// If we need pagination

pagination: { //ページネーション

el: '.swiper-pagination',

// Navigation arrows

navigation: { //遷移ボタン

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

})

外に出したパターン

htmlで外にdivで囲って、元の.swiper-containerの外に出してあげるだけです。
場所とか色々なのはcssで整えるといいです

Demo

デモはこちら

html

  <div class="swiper-parentDiv">
    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="images/slider_image1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider_image2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider_image3.jpg" alt=""></div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

</div>

</div>

</div>

外に出して複数のパターン

外に出すだけだと、複数設置すると同じ様に動いてしまうので、疑似的にクリックさせてます

Demo

デモはこちら

html

中に通常のボタンを配置して、外に新たにボタンを作っています。

  <div class="swiper-parentDiv">
    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"><img src="images/slider_image1.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider_image2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/slider_image3.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 class="swiper-button-prev-a"></div>
    <div class="swiper-button-next-a"></div>

  </div>

</div>

</div>

</div>

css

デフォルトのボタンを見えない様に飛ばして、新しいボタンを配置してます
場所やデザインなんかは調整してくださいね

  .swiper-container {
    width: 600px;
    height: 300px;
    position: relative;
    overflow: hidden;
  }
  
  .swiper-container img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
  }
  
  .swiper-parentDiv {
    width: 600px;
    height: 300px;
    margin: 1em auto;
    position: relative;
  }
  
  //ここで飛ばしてます
  .swiper-button-prev {
    left: -100%;
  }
  
  .swiper-button-next {
    right: -100%;
  }
  
  //新たなボタンを設置
  .swiper-button-prev-a {
    background-image: url(images/swiper-left.svg);
    position: absolute;
    top: calc(50% - 25px);
    right: auto;
    left: -60px;
    width: 50px;
    height: 50px;
  }
  
  .swiper-button-next-a {
    background-image: url(images/swiper-right.svg);
    position: absolute;
    top: calc(50% - 25px);
    left: auto;
    right: -60px;
    width: 50px;
    height: 50px;
  }
  
  .swiper-button-prev-a,
  .swiper-button-next-a {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

.swiper-container {

width: 600px;

height: 300px;

position: relative;

overflow: hidden;

}

.swiper-container img {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

max-width: 100%;

max-height: 100%;

min-width: 100%;

min-height: 100%;

}

.swiper-parentDiv {

width: 600px;

height: 300px;

margin: 1em auto;

position: relative;

}

//ここで飛ばしてます

.swiper-button-prev {

left: -100%;

}

.swiper-button-next {

right: -100%;

}

//新たなボタンを設置

.swiper-button-prev-a {

background-image: url(images/swiper-left.svg);

position: absolute;

top: calc(50% - 25px);

right: auto;

left: -60px;

width: 50px;

height: 50px;

}

.swiper-button-next-a {

background-image: url(images/swiper-right.svg);

position: absolute;

top: calc(50% - 25px);

left: auto;

right: -60px;

width: 50px;

height: 50px;

}

.swiper-button-prev-a,

.swiper-button-next-a {

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

}

js

新たなボタンをクリックしたら、見えなくしているボタンをクリックした様にしてます

    var mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      loop: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: true
      },

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

    const swiperPrev = document.getElementsByClassName('swiper-button-prev-a');
    const swiperNext = document.getElementsByClassName('swiper-button-next-a');

    for (let i = 0; i < swiperPrev.length; i++) {
      swiperPrev[i].addEventListener('click', (e) => {
        const parent = e.target.parentNode;
        const prev = parent.getElementsByClassName('swiper-button-prev')[0];
        prev.click();
      });
    }

    for (let i = 0; i < swiperNext.length; i++) {
      swiperNext[i].addEventListener('click', (e) => {
        const parent = e.target.parentNode;
        const next = parent.getElementsByClassName('swiper-button-next')[0];
        next.click();
      });
    }

var mySwiper = new Swiper('.swiper-container', {

// Optional parameters

loop: true,

autoplay: {

delay: 3000,

disableOnInteraction: true

// If we need pagination

pagination: {

el: '.swiper-pagination',

// Navigation arrows

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

})

const swiperPrev = document.getElementsByClassName('swiper-button-prev-a');

const swiperNext = document.getElementsByClassName('swiper-button-next-a');

for (let i = 0; i < swiperPrev.length; i++) {

swiperPrev[i].addEventListener('click', (e) => {

const parent = e.target.parentNode;

const prev = parent.getElementsByClassName('swiper-button-prev')[0];

prev.click();

});

}

for (let i = 0; i < swiperNext.length; i++) {

swiperNext[i].addEventListener('click', (e) => {

const parent = e.target.parentNode;

const next = parent.getElementsByClassName('swiper-button-next')[0];

next.click();

});

}

使うか使わないかわかりませんが、どうぞご利用ください

Swiper.jsで遷移ボタンをスライドの外に出して複数設置する

まずは普通に設置

Demo

Html

css

js

外に出したパターン

Demo

html

外に出して複数のパターン

Demo

html

css

js

関連

よろしければコメントをどうぞコメントをキャンセル

Profile