質問編集履歴
1
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
スライ
|
|
1
|
+
swiper.jsのhashを使って、特定のスライドに移動するボタンを作りたい
|
body
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
|
-
|
|
2
|
+
swiper.jsを使って作ったスライダーに、
|
|
3
|
-
丸いページネーションとは別に、
|
|
3
|
+
丸いページネーションとは別に、**特定のボタンを押した時に、特定のスライドに移動する**ものを作りたいです。
|
|
4
|
+
swiper.jsのオプションのhashを使うのでは？と思っているのですが、うまくいきません。。
|
|
5
|
+
どなたか教えて頂けませんでしょうか。。
|
|
4
6
|
|
|
7
|
+
|
|
8
|
+
|
|
5
9
|
### 発生している問題・エラーメッセージ
|
|
6
10
|
|
|
7
11
|
```
|
|
8
|
-
|
|
12
|
+
・クリックしてもスライドが切り替わらない
|
|
9
|
-
https://teratail.com/questions/78115
|
|
10
|
-
|
|
13
|
+
・２つ目の<script>～<script>を入力すると、スライドが17枚目（一番最後）から始まるようになってしまう
|
|
14
|
+
（スライドの始まりは１枚目の画像から始めたいです。）
|
|
11
15
|
```
|
|
12
16
|
|
|
13
17
|
### 該当のソースコード
|
|
@@ -37,30 +41,17 @@
|
|
|
37
41
|
<div class="swiper-button-prev"></div>
|
|
38
42
|
<div class="swiper-button-next"></div></div></div></div>
|
|
39
43
|
|
|
40
|
-
<ol>
|
|
41
|
-
<
|
|
44
|
+
<p class="btn" data-hash="3">３へ</p>
|
|
42
|
-
<
|
|
45
|
+
<p class="btn" data-hash="4">４へ</p>
|
|
43
|
-
<
|
|
46
|
+
<p class="btn" data-hash="5">５へ</p>
|
|
44
|
-
<
|
|
47
|
+
<p class="btn" data-hash="0">６へ</p>
|
|
45
|
-
<li><a href="">スライドを画像05.pngに切り替える</a></li>
|
|
46
|
-
<li><a href="">スライドを画像06.pngに切り替える</a></li>
|
|
47
|
-
<li><a href="">スライドを画像07.pngに切り替える</a></li>
|
|
48
|
-
<li><a href="">スライドを画像08.pngに切り替える</a></li>
|
|
49
|
-
<li><a href="">スライドを画像09.pngに切り替える</a></li>
|
|
50
|
-
<li><a href="">スライドを画像10.pngに切り替える</a></li>
|
|
51
|
-
<li><a href="">スライドを画像11.pngに切り替える</a></li>
|
|
52
|
-
<li><a href="">スライドを画像12.pngに切り替える</a></li>
|
|
53
|
-
<li><a href="">スライドを画像13.pngに切り替える</a></li>
|
|
54
|
-
<li><a href="">スライドを画像14.pngに切り替える</a></li>
|
|
55
|
-
<li><a href="">スライドを画像15.pngに切り替える</a></li>
|
|
56
|
-
<li><a href="">スライドを画像16.pngに切り替える</a></li>
|
|
57
|
-
<li><a href="">スライドを画像17.pngに切り替える</a></li>
|
|
58
|
-
</ol>
|
|
59
48
|
|
|
49
|
+
|
|
60
50
|
```
|
|
61
51
|
|
|
62
52
|
```JavaScript
|
|
63
|
-
<script>
|
|
53
|
+
<script>
|
|
54
|
+
var swiper;
|
|
64
55
|
$(window).load(function() {
|
|
65
56
|
swiper = new Swiper('.swiper-container', {
|
|
66
57
|
direction: 'horizontal',
|
|
@@ -68,6 +59,7 @@
|
|
|
68
59
|
autoplay:false,
|
|
69
60
|
loop: true,
|
|
70
61
|
effect:'cube',
|
|
62
|
+
hashnav:'true',
|
|
71
63
|
navigation: {
|
|
72
64
|
nextEl: '.swiper-button-next',
|
|
73
65
|
prevEl: '.swiper-button-prev',
|
|
@@ -75,15 +67,22 @@
|
|
|
75
67
|
pagination: {
|
|
76
68
|
el: '.swiper-pagination',
|
|
77
69
|
type: 'bullets',
|
|
78
|
-
|
|
70
|
+
paginationClickable: 'true',
|
|
79
71
|
}
|
|
80
|
-
|
|
72
|
+
|
|
81
73
|
});
|
|
82
74
|
});
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
<script>
|
|
78
|
+
var swiper;
|
|
79
|
+
$(window).load(function() {
|
|
80
|
+
swiper = new Swiper('.swiper-container', {
|
|
81
|
+
});
|
|
82
|
+
$('.btn[data-hash]').on('click', function () {
|
|
83
|
+
swiper.slideTo(3);
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
</script>
|
|
83
87
|
</script>
|
|
84
|
-
```
|
|
88
|
+
```
|
|
85
|
-
|
|
86
|
-
### 試したこと
|
|
87
|
-
|
|
88
|
-
https://teratail.com/questions/78115
|
|
89
|
-
↑の質問の方法は試してみました。。
|