急いでいます！

swiper.jsについて

締切済

質問者：norisuke04
質問日時：2018/06/11 17:49
回答数：1件

すみません、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">
</div>
</div>
<div class="swiper-slide s-slider__item item-2">
<div class="section-image text one_by_one">
</div>
</div>
<div class="swiper-slide s-slider__item item-3">
<div class="section-image text one_by_one">
</div>
</div>
<div class="swiper-slide s-slider__item item-4">
<div class="section-image text one_by_one">
</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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2018/06/12 13:14

こんにちは

私は使ったことがありませんが、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>