質問編集履歴
3
文法の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
Swiper(バージョン8)を使って、親サムネイル（メインの
|
|
1
|
+
Swiper(バージョン8)を使って、親サムネイル（メインのスライド）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は、
|
|
2
2
|
|
|
3
3
|
『子サムネイルをクリックしてもスライドしないようにするけど、クリックしたら親サムネイルに反映はできる。スライドするのはswiperのnextボタンやprevボタンを押した時だけ』
|
|
4
4
|
|
|
5
|
-
という
|
|
5
|
+
という実装にしたいです。
|
|
6
|
-
|
|
6
|
+
|
|
7
|
-
オプションなど試しているのですが、どうしても子サムネイルをクリックしたらスライドしてしまいます。また、オプションに、
|
|
7
|
+
swiperのオプションなど試しているのですが、どうしても子サムネイルをクリックしたらスライドしてしまいます。また、swiperのオプションに、
|
|
8
8
|
|
|
9
9
|
simulateTouch: false
|
|
10
10
|
|
2
文章の付け足し
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
Swiper(バージョン8)を使って、親サムネイル（メインの画像）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は
|
|
1
|
+
Swiper(バージョン8)を使って、親サムネイル（メインの画像）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は、
|
|
2
2
|
|
|
3
3
|
『子サムネイルをクリックしてもスライドしないようにするけど、クリックしたら親サムネイルに反映はできる。スライドするのはswiperのnextボタンやprevボタンを押した時だけ』
|
|
4
4
|
|
|
5
5
|
という状態にしたいです。
|
|
6
6
|
|
|
7
|
-
オプションなど試しているのですが、どうしても子サムネイル
|
|
7
|
+
オプションなど試しているのですが、どうしても子サムネイルをクリックしたらスライドしてしまいます。また、オプションに、
|
|
8
8
|
|
|
9
9
|
simulateTouch: false
|
|
10
10
|
|
1
タイトルの変更、コードにインデントをつけた
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Swiperでサムネイルをスライドしてしまうので、スライドさせないようにしたい
|
|
1
|
+
サムネイル付きのSwiperで、サムネイルをクリックするとスライドしてしまうので、スライドさせないようにしたい
|
test
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
Swiper(バージョン8)を使って、親サムネイル（メインの画像）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は
|
|
1
|
+
Swiper(バージョン8)を使って、親サムネイル（メインの画像）と子サムネイルを設置しています。子サムネイルをクリックすると、スライドが右から左にスライドしてしまうのですが、本当は
|
|
2
|
+
|
|
2
|
-
|
|
3
|
+
『子サムネイルをクリックしてもスライドしないようにするけど、クリックしたら親サムネイルに反映はできる。スライドするのはswiperのnextボタンやprevボタンを押した時だけ』
|
|
4
|
+
|
|
5
|
+
という状態にしたいです。
|
|
6
|
+
|
|
3
|
-
オプションなど試しているのですが、どうしても子サムネイルがスライドしてしまいます。また、オプションに
|
|
7
|
+
オプションなど試しているのですが、どうしても子サムネイルがスライドしてしまいます。また、オプションに、
|
|
8
|
+
|
|
4
9
|
simulateTouch: false
|
|
10
|
+
|
|
5
11
|
を記述して、子サムネイルがクリックしてもスライドしないようにすることはできるのですが、その記述をすると子サムネイルをクリックしても親サムネイルに反映されなくなってしまいます。
|
|
6
12
|
|
|
7
13
|
下記にスライダー部分の子サムネイル部分のhtmlとscss（親サムネイル部分のhtmlとcssも載せたら文字数オーバーになってしまったため）と、swiperに関するJavascriptのコードを載せさせていただくので、どうすれば子サムネイルがスライドしないようにするかをご教示いただけますと幸いでございます。
|
|
@@ -14,37 +20,37 @@
|
|
|
14
20
|
|
|
15
21
|
```index.html
|
|
16
22
|
<div class="swiper slider-thumbnail">
|
|
17
|
-
|
|
23
|
+
<div class="swiper-wrapper">
|
|
18
|
-
|
|
24
|
+
<!-- 子サムネイルのスライド1枚目 -->
|
|
19
|
-
|
|
25
|
+
<div class="p-contents__flex swiper-slide">
|
|
20
|
-
|
|
26
|
+
<div class="p-contents__en">
|
|
21
|
-
|
|
27
|
+
<img src="./img/contents-en.png" alt="CONTENTS" />
|
|
22
|
-
|
|
28
|
+
</div>
|
|
23
|
-
|
|
29
|
+
<div class="p-contents__image">
|
|
24
|
-
|
|
30
|
+
<img src="./img/contents02.jpg" alt="" />
|
|
25
|
-
|
|
31
|
+
</div>
|
|
26
|
-
|
|
32
|
+
<div class="p-contents__texts">
|
|
27
|
-
|
|
33
|
+
<h2 class="p-contents__title">
|
|
28
|
-
|
|
34
|
+
1ほげほげ
|
|
29
|
-
|
|
35
|
+
</h2>
|
|
30
|
-
|
|
36
|
+
<p class="p-contents__desc">
|
|
31
|
-
2ほげほげ
|
|
37
|
+
2ほげほげ
|
|
32
|
-
|
|
38
|
+
</p>
|
|
33
|
-
|
|
39
|
+
<div class="p-contents__tags">
|
|
34
|
-
|
|
40
|
+
<div class="p-contents__tag" style="border: none">
|
|
35
|
-
|
|
41
|
+
#hoge
|
|
36
|
-
|
|
42
|
+
</div>
|
|
37
|
-
|
|
43
|
+
</div>
|
|
38
|
-
|
|
44
|
+
|
|
39
|
-
|
|
45
|
+
<a
|
|
40
|
-
href=""
|
|
46
|
+
href=""
|
|
41
|
-
class="p-contents__link c-read-link-two"
|
|
47
|
+
class="p-contents__link c-read-link-two"
|
|
42
|
-
target="_blank"
|
|
48
|
+
target="_blank"
|
|
43
|
-
rel="noopener"
|
|
49
|
+
rel="noopener"
|
|
44
|
-
>Read more</a
|
|
50
|
+
>Read more</a
|
|
45
|
-
|
|
51
|
+
>
|
|
46
|
-
|
|
52
|
+
</div>
|
|
47
|
-
|
|
53
|
+
</div>
|
|
48
54
|
<!-- 子サムネイルのスライド2枚目 -->
|
|
49
55
|
<div class="p-contents__flex swiper-slide">
|
|
50
56
|
<div class="p-contents__en">
|