2022.12.16

Swiper スワイパーを逆順にする｜javascript

色々なサイトでよくSwiperを使ってスライドを制作しているのを見かけます。

Swiperを簡単に解説すると、純粋なjavascriptだけで動き動作も安定しているとても優秀なライブラリです。

Swiperは標準では左から右に切り替えていくのですがそれを逆順（右から左へ）にする方法をご紹介。

まずはHTMLですがこちらも逆順で作成します。

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <!-- 本来とは逆の順番にする -->
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 1</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-slide">Slide 3</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 1</div>

</div>

</div>

こんな感じ

あとは「initialSlide」で最後の番号を設定します。

var mySlide,
    mySlideNth,
    swiperSlides = document.querySelectorAll('.swiper-slide');

swiperSlides = Array.prototype.slice.call(swiperSlides, 0);
mySlideNth = swiperSlides.length;

mySlide = new Swiper('.swiper', {
  pagination: {
    el: ".swiper-pagination",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  initialSlide: mySlideNth - 1,
});

var mySlide,

mySlideNth,

swiperSlides = document.querySelectorAll('.swiper-slide');

swiperSlides = Array.prototype.slice.call(swiperSlides, 0);

mySlideNth = swiperSlides.length;

mySlide = new Swiper('.swiper', {

pagination: {

el: ".swiper-pagination",

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

initialSlide: mySlideNth - 1,

});

またpaginationの順番も逆準にしたい場合はcssのflexで指定しましょう。

/* 例 */
.swiper-pagination{
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}

/* 例 */

.swiper-pagination{

display: flex;

justify-content: center;

flex-direction: row-reverse;

}

ただpaginationのtypeをfraction（数字表示）にする場合はもう少し工夫が必要です。

その場合、コードを以下のように修正しましょう。

var mySlide, 
    currentNumbers = [],
    mySlideNth,
    swiperSlides = document.querySelectorAll('.swiper-slide');

swiperSlides = Array.prototype.slice.call(swiperSlides, 0);
mySlideNth = swiperSlides.length;


for (var i = 0; i < mySlideNth; i++) {
  currentNumbers[mySlideNth - i] = i + 1;
}

mySlide = new Swiper('.swiper', {
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
    formatFractionCurrent: function (number) {
     	return currentNumbers[number];
    }
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",

  },
  initialSlide: mySlideNth - 1,
});

var mySlide,

currentNumbers = [],

mySlideNth,

swiperSlides = document.querySelectorAll('.swiper-slide');

swiperSlides = Array.prototype.slice.call(swiperSlides, 0);

mySlideNth = swiperSlides.length;

for (var i = 0; i < mySlideNth; i++) {

currentNumbers[mySlideNth - i] = i + 1;

}

mySlide = new Swiper('.swiper', {

pagination: {

el: ".swiper-pagination",

type: "fraction",

formatFractionCurrent: function (number) {

return currentNumbers[number];

}

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

initialSlide: mySlideNth - 1,

});

これで数字部分も含め逆順にできました。

少し解説すると「formatFractionCurrent」で表示する番号を変更しています。

引数numberに現在の番号が入っているので予め対応した番号をcurrentNumbersへ格納しておき、値を返しています。

NEWS