Swiperスライダーを印刷の時だけ削除したい

Question

印刷の時だけSwiperスライダーを削除して通常の画像表示にしたいです。色々検索してteratial内で以下のSlickスライダーの事例がありbeforeprint/afterprintを使えばいいのではという回答がありました。
https://teratail.com/questions/134034

参考にしてSwiperにも使えないか試してみたのですが自分のスクリプトコピペ改変程度の力量では応用できず、印刷時の挙動オプションもないようで途方に暮れております。

Answer 1

unslick と同様の効果があるメソッドはこちらだと思います。

swiper.destroy | Swiper API

Comments

[mb2_dp]

早速の回答ありがとうございます。destroyを使用して質問に記載したbeforeprint/afterprintのスクリプトに当てはめてみたのですがコンソールに「Uncaught TypeError: Cannot read properties of undefined (reading 'destroy')」と出力されてしまいます。

$(window).on('beforeprint', function(event) {
swiper.destroy();
}).on('afterprint', function(event) {
initSwiper();
});

destroyの記述の仕方に問題があるのだとは思いますがどう修正して良いかが分かりません。

[Lhankor_Mhy]

swiper に何も入っていないのでは。

[mb2_dp]

やっぱりそうですよね・・・エラーのテキストを検索して調べた限りswiperに値が入ってないからではと考えておりました。現在他人が作ったぺージのスクリプトに自分が追記する形で作業しているのですが基本的なスクリプトの知識がないため記述の意味が分からず（functionてなんすか？というレベルです）大苦戦しております。見る人が見れば一発なのでしょうが一旦保留にしてcssの@media printで対応してみます。せっかく回答していただいたのに生かせず申し訳ありません。

[Lhankor_Mhy]

いえいえ。お気になさらず。

hoge = new Swiper()
とか書いてあったら、hoge が swiper の代わりです。