すみません、swiper.jsについてご教授頂きたいのですが
liタグのテキストをクリックでスライド画像を切り替えたいのですが
色々探したのですがマッチするするものがなく困っております。
良い方法がありましたらご教授頂ければ幸いです。
<div class="main-content" id="main-content">
<section class="main-section-1 s-cover" id="main-section-1">
<div class="main-section-1-inner clearfix">
<div class="main-section-1-inner__left js-cols-responsive">
<div class="swiper-container" id="cover-slider">
<div class="swiper-wrapper">
<div class="swiper-slide s-slider__item item-1">
<div class="section-image text one_by_one">
<!--<img class="visible-pc" src="Image/s1-img1.jpg" alt="" /><img class="visible-sp" src="img/sp/" alt="" />--></div>
</div>
<div class="swiper-slide s-slider__item item-2">
<div class="section-image text one_by_one">
<!--<img class="visible-pc" src="Image/s1-img2.jpg" alt="" /><img class="visible-sp" src="Image/sp/" alt="" />--></div>
</div>
<div class="swiper-slide s-slider__item item-3">
<div class="section-image text one_by_one">
<!--<img class="visible-pc" src="Image/s1-img3.jpg" alt="" /><img class="visible-sp" src="Image/sp/" alt="" />--></div>
</div>
<div class="swiper-slide s-slider__item item-4">
<div class="section-image text one_by_one">
<!--<img class="visible-pc" src="Image/s1-img4.jpg" alt="" /><img class="visible-sp" src="Image/sp/" alt="" />--></div>
</div>
</div>
</div>
</div>
<div class="main-section-1-inner__right js-cols-responsive">
<p>
テスト<br />
テスト<br />
テスト</p>
<ul>
<li>
s1-img1表示</li>
<li>
s1-img2表示</li>
<li>
s1-img3表示</li>
<li>
s1-img4表示</li>
</ul>
</div>
</div>
</section>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
私は使ったことがありませんが、swiper.jsと「紹介」、「使い方」、「設置法」などを併せて検索すれば解説サイトがたくさん見つかるはずですが?
ちなみに、配布元サイトはこちら。(← 一番確実な情報です)
http://idangero.us/swiper/get-started/
>liタグのテキストをクリックでスライド画像を切り替えたい
ご提示のHTMLの前半はご質問に関係あるのでしょうか?(よくわからん)
CSSも無いし、何をどうにしたいのかよくわかりませんけれど、『li要素をスライドパネルにして、動けば良い』というレベルであるなら、適当に設定して、以下で動作すると思いますけれど・・・
※ この掲示板では、CDNサイトへのURLがリンクに変えられてしまいますのでご注意。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
* { box-sizing: border-box; }
.swiper-container { width:400px; height:300px; }
.swiper-wrapper { margin:0; padding:0; list-style-type:none; }
.swiper-slide { padding:1em; background-color: #EFE; border:1px solid #AAA; }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4. …
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4. …
<script type="text/javascript">
window.addEventListener("load", function(){
var mySwiper = new Swiper (".swiper-container", {});
});
</script>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">s1-img1表示</li>
<li class="swiper-slide">s1-img2表示</li>
<li class="swiper-slide">s1-img3表示</li>
<li class="swiper-slide">s1-img4表示</li>
</ul>
</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じjqueryを2つ並べて動かし...
-
同一ページ内の複数のタグに同...
-
ご教授ください。
-
fontsize.jsでhtmlの大中小の設...
-
bxsliderでスライドショーの間...
-
javascript src書き換え
-
javascriptで文字サイズの変更
-
Dreamweaver上とデバイスプレビ...
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
ランダムに画像を表示し、ポッ...
-
読み込んだQRコードをフォーム...
-
Webサイト作成 プログレスバー ...
-
追加記入もできるプルダウンメ...
-
JavaScriptで変更した属性の元...
-
サムネイルをクリックして背景...
-
文字を固定したいのですが…
-
javascriptテキストBOX色を元に...
-
bxsliderで最初に縦に複数表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
Dreamweaver上とデバイスプレビ...
-
swiper.jsについて
-
楽天APIのデータをjqueryのgetJ...
-
エンドロールを枠の中で表示す...
-
jQueryでタブ、スライダーを使...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
SimplyScrollについて
-
html5に変えるとスライドショー...
-
javascript 神経衰弱
おすすめ情報