2025.08.27

macのsafariでブラウザバックをした際にswiperの自動スライドが動かない問題への対処

safriとブラウザバックとswiperと

お疲れ様です。

私はスライダー系のライブラリでswiperを使う場合があります。

そんなswiperとsafariの挙動で少しつまずいたのでメモしておきましょう。

症状

▼safariにて別ページからブラウザバックで戻ってきた場合にswiperが止まっている場合がある。

まぁ、みなさん先に結論が欲しいかと思いますので最初に載せましょう。

実は色々と試したのですが一番スマートなのはスライドを再生成する方法でした。

var swiperOption = {
      //お好きなオプション
    },
    swiper = new Swiper('.swiper',swiperOption),
    $window = $(window);

$window.on('pageshow', function (e) {
  if (e.originalEvent && e.originalEvent.persisted) {

    swiper.destroy(true,true);//一度壊して
    swiper = new Swiper('.swiper',swiperOption);//再生成
  }
});

var swiperOption = {

//お好きなオプション

swiper = new Swiper('.swiper',swiperOption),

$window = $(window);

$window.on('pageshow', function (e) {

if (e.originalEvent && e.originalEvent.persisted) {

swiper.destroy(true,true);//一度壊して

swiper = new Swiper('.swiper',swiperOption);//再生成

}

});

これで問題なく動きます。

一応別の方法としてスライドの再生成ではなく「window.location.reload();」を入れるという方法もありますが、使用感が悪くなりますのでなるべく使わない方がいいでしょう。

※ブラウザバック時の他の不具合もまとめて簡単に対処したい場合などはありこもですけどね

軽く解説すると

pageshowイベントをトリガーにします。

pageshowはページが表示された時のイベントで、ブラウザバックでキャッシュからページが復元されても発火するイベントです。

次に、ブラウザバックでキャッシュ（bfcacheといいます）から復元されたページか判別しています。

あとはswiperの再生成を行うだけです。

ちなみに、swiper.autoplay.start()やswiper.autoplay.stop()を使ってどうにかできないかもやってみましたが、うまくはいきませんでした。

それでは良きコーディングライフを。

JavaScript