質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

252閲覧

Swiperが動かない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/07/31 07:04

前提・実現したいこと

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}
{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}
</div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ⑤

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問