複数設定したswiperのcssリセットが効きません（jquery使用)

Question

前提・実現したいこと

スマホサイズにおいてswiperを用いて複数のスライダーを設置し、かつpcサイズでは横並びの通常表示としたい。

発生している問題・エラーメッセージ

jQueryを用いてsliderの機能停止と設定されたcssのリセット機能を付与してみましたが、スマホ→pcサイズにサイズ変更したときに、２つ目以降のスライダーにおいてcssのリセットが行われません。

該当のソースコード

 var destroyed = true;
        $(window).on('load resize', function () {
            $('.swiper-container').each(function () {
                if (destroyed == false) {	//Swiperが存在しているときだけ削除処理を行う
                    this.swiper.destroy();
                    destroyed = true;
                }
            });
            var w = $(window).width();
            makeSwiper(w);
        });

        $(function () {
            var w = $(window).width();
            makeSwiper(w);
        });

        function makeSwiper(w) {
            //画面サイズによる切り分け
            if (w > 780) {
                //画面幅780～ swiperが付けたstyleを削除する
                $('.swiper-wrapper').removeAttr('style');
                $('.swiper-slide').removeAttr('style');
            } else {
                //swiperを新たに作成
                ///slider1
                var mySwiper = new Swiper('.slider1', {
                    // ここからオプション
                    loop: false,
                    effect: "slide",
                    slidesPerView: 1.7,
                    spaceBetween: 20,  
                    centeredSlides: true, 
                    pagination: {
                        el: '.swiper-pagination1',
                        clickable: true
                    },
                });

                ///slider2
                var mySwiper = new Swiper('.slider2', {
                    // ここからオプション
                    loop: false,
                    effect: "slide",
                    slidesPerView: 1.8, //一度に表示するslideの数
                    spaceBetween: 30,   //slideの間隔
                    centeredSlides: true,  //slideを中央に表示
                    pagination: {
                        el: '.swiper-pagination2',
                        clickable: true
                    },
                });

                ///slider3
                var mySwiper = new Swiper('.slider3', {
                    // ここからオプション
                    loop: false,
                    effect: "slide",
                    slidesPerView: 1.8, 
                    spaceBetween: 30,   
                    centeredSlides: true, 
                    pagination: {
                        el: '.swiper-pagination3',
                        clickable: true
                    },
                });

              
                });
                destroyed = false;

            }
        }

試したこと

swiperの関数destroy()を用いてcssリセットを試みましたが、うまく行かないためjQueryを用いて試してみたところ、１つ目のスライダーは機能するようになりましたが、２つ目以降のcssリセットがうまくいきません。
模写コーディングにて学習中です。
有効な他の方法等ありましたら教えていただければ嬉しいです。

Answer 1

複数あっても2個目からはdestroyed = true;になるからです。

            $('.swiper-container').each(function () {
                if (destroyed == false) {    //Swiperが存在しているときだけ削除処理を行う
                    this.swiper.destroy();
                    destroyed = true;
                }
            });
```やるならこう。
```js
            if (destroyed == false) {    //Swiperが存在しているときだけ削除処理を行う
                $('.swiper-container').each(function () {
                    this.swiper.destroy();
                });
                destroyed = true;
            }

Comments

[oscar1164]

問題解決しました。1つ目のスライダーにしか効いていなかったんですね。大変勉強になりました。ありがとうございました。