Swiper.js が動作しない原因と対応方法【javascript】

jQueryが不要でjavascriptのみで動作するスライダーライブラリ swiper.js。

https://swiperjs.com/

レスポンシブでモバイルにも対応しています。

Swiperの使い方

簡単にSwiperの使い方を下記に説明します。

Swiperインストール

Swiperのjavascriptを読み込みます。ここではCDNで提供されている最新バージョンを利用します。

// CSS
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">

// JavaScript
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML作成

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide1</div>
    <div class="swiper-slide">Slide2</div>
    <div class="swiper-slide">Slide3</div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>

クラス定義は上記の構造でないと動作しないので気をつけましょう。

javascript作成

Swiperクラスを生成しオプションを指定します。

var Swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

これで設定完了です。

動作デモ

https://choppydays.com/static/swiperjs/

Swiper.jsが動作しない主な原因

環境や設定によってSwiperが動作しない場合があります。

下記に動作させるための設定を記載します。

Swiperバージョンでオプション指定が異なる

Swiperバージョン5以降は、スライドボタンを表示するnavigation の指定が異なります。

// バージョン5以降の定義方法
var Swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})
// バージョン4以前の定義方法
var Swiper = new Swiper ('.swiper-container', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
});

Swiperのpaginationをクリックしても反応しない

Swiperのpaginationをクリックしても反応しない場合は、paginationオプションの指定に下記を追加します。

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },

Swiper.jsでNavigation のprev、nextボタンが反応しない

Swiperでスライドはするものの、動作が不安定で Prev Nextボタンが反応しない場合があります。

不具合デモ

https://choppydays.com/static/swiperjs/prevnextnotworking.html

動きがおかしい、反応しない原因は 「CSS」

WordPressで設置した場合などで、Swiper読み込み、オプションの設定は正しいにも関わらず動作がおかしい場合があります。

調査した結果、Wordpressのデフォルトテーマ「TwentyTwenty」などに含まれるCSSが原因の場合があります。

問題となるCSS

* {
   transition-duration: 0s !important;
}

上記を削除する、または定義をSwiper部分のみ上書きします。

@media ( prefers-reduced-motion: reduce ) {
   .sip-slider, .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide img{
    transition-duration: 100ms !important;
  }
}

transition-duration を強制的に0s にする定義がある場合、SwiperのPrev、Nextボタンが効かなかったり、スライドアニメーションが反応しないようになっています。

その場合は上記CSSを無効化する、またはSwiper定義部分のみ再定義することで動作が可能です。

Swiper.js が動作しない原因と対応方法【javascript】」への5件のフィードバック

  1. Swiper 動きません。

    やったこと:
    ・CDN で動作を検証したらCSSのみ動く反応があります。
    ・ただ、一度だけJSが動きました。Function.php に問題があるのか
    みていますが、問題はなさそうです。
    Jquery なくても動けるスライダーなので干渉はしない。

    functions.php

    add_action(‘wp_enqueue_scripts’, ‘dess_theme_imports’);

    function dess_theme_imports(){

    /*Home page and Gallary page for stylesheet and scripts*/

    //wp_enqueue_style( ‘google-lato-font’, ‘https://fonts.googleapis.com/css?family=Lato:300,400,500,700,900’ );

    //Gallay Page for Slider
    wp_enqueue_style( ‘swiper-style’, get_template_directory_uri().’/css/swiper-bundle.css’ );
    //wp_enqueue_style( ‘slick-theme’, get_template_directory_uri() . ‘/css/slick-theme.css’ );

    //home page slick navi
    wp_enqueue_style( ‘slicknav’, get_template_directory_uri().’/css/slicknav.min.css’ );

    //home page slick slider
    wp_enqueue_style( ‘slick-slider’, get_template_directory_uri().’/css/slick.css’ );

    //wordpress 用の jquery wp-include にある ※基本は、Jquery version 新しく追加しない。
    wp_enqueue_script( ‘jquery’ );

    //gallary page for swiper slider
    wp_enqueue_script( ‘swiper-slider’, get_template_directory_uri() . ‘/js/swiper-bundle.min.js’ );

    //home page for slick nav responsive nabi menu
    wp_enqueue_script( ‘slicknav’, get_template_directory_uri() . ‘/js/jquery.slicknav.min.js’ );

    //hoem page for Slider
    wp_enqueue_script( ‘slick-slider’, get_template_directory_uri() . ‘/js/slick.min.js’ );

    //hoem page for フィルタリングやソート機能、グリッドレイアウトプラグイン
    wp_enqueue_script( ‘isotpe’, get_template_directory_uri() . ‘/js/isotope.pkgd.min.js’ );

    //hoem page for 要素からはみ出したテキストを省略してくれるjQueryプラグイン
    wp_enqueue_script( ‘dotdot’, get_template_directory_uri() . ‘/js/jquery.dotdotdot.min.js’ );

    //hoem page for imagesLoadedを使って画像の読み込みタイミングを管理
    wp_enqueue_script( ‘imagesloaded’, get_template_directory_uri() . ‘/js/imagesloaded.pkgd.min.js’ );

    //hoem page for js below
    wp_enqueue_script( ‘js-script’, get_template_directory_uri() . ‘/js/scripts.js’ );

    my original js file

    /Initialize Swiper for slider for gallary page

    let mySwiper = new Swiper (‘.swiper’, {
    // 以下にオプションを設定
    loop: true, //最後に達したら先頭に戻る

    //ページネーション表示の設定
    pagination: {
    el: ‘.swiper-pagination’, //ページネーションの要素
    type: ‘bullets’, //ページネーションの種類
    clickable: true, //クリックに反応させる
    },

    //ナビゲーションボタン(矢印)表示の設定
    navigation: {
    nextEl: ‘.swiper-button-next’, //「次へボタン」要素の指定
    prevEl: ‘.swiper-button-prev’, //「前へボタン」要素の指定
    },

    //スクロールバー表示の設定
    scrollbar: {
    el: ‘.swiper-scrollbar’, //要素の指定
    },
    });

    <link rel="shortcut icon" href="/images/favicon.ico” />

    header.php CSSは動きますが、JSうごがないです。動きが鈍いわけでもないです。


    <!—->

    wp_head(); ?>

    結論、JS for swiper 動かないです。

    よかったらウェブサイトを見てください。
    よろしくお願い申し上げます。

    1. おそらくですが、swiperオプションがDOM読み込み前に実行される状態になっているのが原因かと思います。

      swiperオプションはswiper定義のHTML以降に記述する、または下記のようにdom読み込み完了後に実行されるようにするかで解決されると思います。


      /* onload */
      (window.onload = function() {
      /* swiper */
      const swiper = new Swiper(‘.swiper’, {
      ~~
      });
      })();

  2. こんばんは。

    子テーマが読み込めないです。

    Function.php ファイル

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array('parent-style')
    );
    }

    こちらのコードだとレイアウトが左寄せで表示になります。
    Google コンソールでは全てのcss js 読み込まれていますが 左寄せで表示になっています。

    子テーマのCSS ファイル

    /*@import url('../Xiaoyu Tekken7/style.css');

    こちらだとレイアウトは崩れないのですが、フロントページに必要な
    が抜けて表示されています。それ以外は問題ないです。

    0から親テーマから作成しているので特に子テーマを利用することもないのですが、
    子テーマを利用したwordpress 勉強をしたいと思い子テーマを作ろうとしたら
    親テーマの複製サイトにならないです。

    よろしくお願い申し上げます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です