前提・実現したいこと
Swiperを使用して画像のスクロールを行いたい
⇒一番右まで行った際は最初に戻るようにしたい
⇒何もしなくても、5秒ごとに自動スクロールも付与したい。
発生している問題・エラーメッセージ
画像、左右の矢印は表示されているが ボタンを押しても動かない。
試したこと
現在のHTMLを記載します。
ご教授願います。
①{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"> {/block:Hidden}②<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js">③ {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 mySwiper = new Swiper('.swiper-container', { loop: true, speed: 1000, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true } }); </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}</div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ⑤{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}
あなたの回答
tips
プレビュー