swiperが動きません。助けてください。泣

Question

swiperが動きません。助けてください。泣

コードはこちらになります。
よろしくお願い申し上げます。

{block:IndexPage}

<!-- Swiper START --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src=""></a></div> <div class="swiper-slide"><a href=""><img src=""></a></div> <div class="swiper-slide"><a href=""><img src=""></a></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- Swiper END --> <script> var swiper = new Swiper ('.swiper-container', { loop: true, paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', }); </script> <style> .swiper-wrapper img { width: 100%; height: auto; } .swiper-slide { width: 100%; height: 100%; text-align: center; } .swiper-pagination-bullet-active { background: #fff; } </style> {/block:IndexPage} <div class="swiper-container"> <div class="swiper-wrapper"> {block:image-Slide01} <div class="swiper-slide"> <a href="{block:text-Link_Slide01}{text:Link Slide01}{/block:text-Link_Slide01}"> <img src="{image:Slide01}"></a> </div> {/block:image-Slide01}

{block:image-Slide02}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide02}{text:Link Slide02}{/block:text-Link_Slide02}"><img src="{image:Slide02}"></a>
</div>
{/block:image-Slide02}

{block:image-Slide03}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide03}{text:Link Slide03}{/block:text-Link_Slide03}"><img src="{image:Slide03}"></a>
</div>
{/block:image-Slide03}

 {block:image-Slide04}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide02}{text:Link Slide04}{/block:text-Link_Slide04}"><img src="{image:Slide04}"></a>
</div>
{/block:image-Slide04}

 {block:image-Slide05}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide05}{text:Link Slide05}{/block:text-Link_Slide05}"><img src="{image:Slide05}"></a>
</div>
{/block:image-Slide05}

 {block:image-Slide06}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide06}{text:Link Slide06}{/block:text-Link_Slide06}"><img src="{image:Slide06}"></a>
</div>
{/block:image-Slide06}

 {block:image-Slide07}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide07}{text:Link Slide07}{/block:text-Link_Slide07}"><img src="{image:Slide07}"></a>
</div>
{/block:image-Slide07}

 {block:image-Slide08}
<div class="swiper-slide">
  <a href="{block:text-Link_Slide08}{text:Link Slide08}{/block:text-Link_Slide08}"><img src="{image:Slide08}"></a>
</div>
{/block:image-Slide08}

{block:Hidden}

<!-- meta tag --> <meta name="image:Slide01" content="" label="スライド画像01"> <meta name="text:Link Slide01" content="" label="スライドリンク01"> <meta name="image:Slide02" content="" label="スライド画像02"> <meta name="text:Link Slide02" content="" label="スライドリンク02"> <meta name="image:Slide03" content="" label="スライド画像03"> <meta name="text:Link Slide03" content="" label="スライドリンク03"> <meta name="image:Slide04" content="" label="スライド画像04"> <meta name="text:Link Slide04" content="" label="スライドリンク04"> <meta name="image:Slide05" content="" label="スライド画像05"> <meta name="text:Link Slide05" content="" label="スライドリンク05"> <meta name="image:Slide06" content="" label="スライド画像06"> <meta name="text:Link Slide06" content="" label="スライドリンク06"> <meta name="image:Slide07" content="" label="スライド画像07"> <meta name="text:Link Slide07" content="" label="スライドリンク07"> <meta name="image:Slide08" content="" label="スライド画像08"> <meta name="text:Link Slide08" content="" label="スライドリンク08"> {/block:Hidden} </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。ただ、コピペで再現できますか？これ。JavaScriptとHTMLだけの環境で動くのでしょうか

[退会済みユーザー]

https://teratail.com/questions/281624 と同じ質問ですよね。レスが付かないからと言ってスレッドを乱立するのは NG です。はっきり言うとあなた以外の閲覧者にとっては迷惑です。

一度 https://teratail.com/help/question-tips を読むことをお勧めします。なぜ前のスレッドにレスが付かなかったのか、どうすればよかったのかのヒントが見つかるかもしれません。