# swiperjs の初期化が機能しない

**URL:** <https://meta.discourse.org/t/initialize-swiperjs-not-working/152736>\
**Category:** Support\
**Created:** [2020 年 5 月 26 日午前 7:03 UTC](https://meta.discourse.org/t/initialize-swiperjs-not-working/152736 "2020-05-26T07:03:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aksoforever](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aksoforever/32/502615_2.png) [@aksoforever](https://meta.discourse.org/u/aksoforever)\
**Post date:** [2020 年 5 月 26 日午前 7:03 UTC](https://meta.discourse.org/t/initialize-swiperjs-not-working/152736/1 "2020-05-26T07:03:33Z")

</div>

ディスコースチーム、こんにちは

ホームページのバナーに Swiper.js を追加しようとしているのですが、初期化時に失敗してしまいます。

これが私の初期化コードです。

> var mySwiper = new Swiper (‘.swiper-container’, {  
> // オプションパラメータ  
> direction: ‘horizontal’,  
> loop: true,  
> // ページネーションが必要な場合  
> pagination: {  
> el: ‘.swiper-pagination’,  
> clickable:true,  
> },  
> // ナビゲーション矢印  
> navigation: {  
> nextEl: ‘.swiper-button-next’,  
> prevEl: ‘.swiper-button-prev’,  
> },  
> })

しかし、Swiper.js が機能しません。  
数日前に OwlCarousel を使った際も同じ問題が発生しました。  
何か見落としているはずだと思うのですが、何が悪いのか分かりません。  
どなたか問題の特定やミスの指摘にご協力いただけませんでしょうか？

追記：Swiper と Owl をフロー通りに初期化すると両方とも動作しますが、一度戻るとページを強制的にリフレッシュしないと再び動作しなくなります。

> $(window).on(“load”, function(){  
> //…  
> });

---

<div class="post-metadata">

**Author:** ![Bcat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bcat/32/163148_2.png) [@Bcat](https://meta.discourse.org/u/Bcat)\
**Post date:** [2020 年 5 月 26 日午前 8:05 UTC](https://meta.discourse.org/t/initialize-swiperjs-not-working/152736/2 "2020-05-26T08:05:29Z")

</div>

これは単なるデモです。`{{#if displaydiscourseSwiper}}` を使用する必要がありますが、after\_header でテストしたところ表示されませんでした。  
CSS を使用し、Swiper の CSS と JS ライブラリを読み込むことをお勧めします。

> **[GitHub - bcat95/discourse-swiper](https://github.com/bcat95/discourse-swiper)**
>
> Contribute to bcat95/discourse-swiper development by creating an account on GitHub.

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/6/868920f0ae22df06187157ed39c54b337d2d395b.jpeg)

---

<div class="post-metadata">

**Author:** ![aksoforever](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aksoforever/32/502615_2.png) [@aksoforever](https://meta.discourse.org/u/aksoforever)\
**Post date:** [2020 年 5 月 26 日午前 9:08 UTC](https://meta.discourse.org/t/initialize-swiperjs-not-working/152736/3 "2020-05-26T09:08:43Z")

</div>

はは、ありがとう、すごく気に入りました。とっても素敵ですね。😘 😘 😘

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/c/9c9d826199296a5bb80aa38331058f3e7e7c9d20.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2020 年 6 月 25 日午前 9:17 UTC](https://meta.discourse.org/t/initialize-swiperjs-not-working/152736/4 "2020-06-25T09:17:03Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.