回答編集履歴
3
（タブ）クリックイベントについてコードを修正
test
CHANGED
|
@@ -7,6 +7,68 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
`Swiper`というのは、作成してあるタブごとにインスタンスを作成しなければなりません。タブ１できちんと動いているということなので、同じオプションで問題ないのであれば下記のようにします。別々のオプションが必要な場合は、別々にセレクターで指定してインスタンスを作成します。
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
試してないので不具合があるかもしれませんが、ポイントとしては、タブがクリックされて、フェードイン完了時に`Swiper`インスタンスを作成すればよいと思います。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
1. タブクリック
|
|
18
|
+
|
|
19
|
+
1. フェードイン
|
|
20
|
+
|
|
21
|
+
1. Swiperインスタンス作成（フェードインが終わったら）
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
**※注意点**
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
- 初期タブは上記と関係なくSwiperインスタンスを作成します。
|
|
30
|
+
|
|
31
|
+
- 後で同じタブをクリックしたときに、作成済みインスタンスで実行できるので、インスタンスを配列などに入れて記憶しておきます。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
|
|
37
|
+
(function($) {
|
|
38
|
+
|
|
39
|
+
$(document).ready(function() {
|
|
40
|
+
|
|
41
|
+
$('.tab_area:first').show();
|
|
42
|
+
|
|
43
|
+
$('.tab li:first').addClass('active');
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
//タブ切替
|
|
48
|
+
|
|
49
|
+
$('.tab li').click(function() {
|
|
50
|
+
|
|
51
|
+
$('.tab li').removeClass('active');
|
|
52
|
+
|
|
53
|
+
$(this).addClass('active');
|
|
54
|
+
|
|
55
|
+
$('.tab_area').hide();
|
|
56
|
+
|
|
57
|
+
//fadeIn()をインラインへ移動
|
|
58
|
+
|
|
59
|
+
return false;
|
|
60
|
+
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
})(jQuery);
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
インラインのJavaScriptを下記のようにします。
|
|
10
72
|
|
|
11
73
|
|
|
12
74
|
|
|
@@ -56,15 +118,41 @@
|
|
|
56
118
|
|
|
57
119
|
|
|
58
120
|
|
|
59
|
-
|
|
121
|
+
var swipers = [];
|
|
60
122
|
|
|
61
|
-
new Swiper('#tab1 .swiper-container', options);
|
|
62
123
|
|
|
63
|
-
//#tab2
|
|
64
124
|
|
|
65
|
-
|
|
125
|
+
//タブ切替
|
|
66
126
|
|
|
127
|
+
$('.tab li').click(function() {
|
|
128
|
+
|
|
129
|
+
//タブのフェードインが完了したら、Swiperを動作させる
|
|
130
|
+
|
|
131
|
+
$($(this).find('a').attr('href')).fadeIn(400, 'swing', function() {
|
|
132
|
+
|
|
133
|
+
var currentId = $(this).attr('id');
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
67
|
-
//
|
|
137
|
+
//#tabX Swiper作成
|
|
138
|
+
|
|
139
|
+
if ($.type(swipers[currentId]) !== 'object') {
|
|
140
|
+
|
|
141
|
+
swipers[currentId] = new Swiper('#'+ currentId +' .swiper-container', options);
|
|
142
|
+
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
return false;
|
|
148
|
+
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
//#tab1（初期タブ） Swiper作成
|
|
154
|
+
|
|
155
|
+
swipers['tab1'] = new Swiper('#tab1 .swiper-container', options);
|
|
68
156
|
|
|
69
157
|
```
|
|
70
158
|
|
2
タイプミス編集（詩的→指摘）
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
質問文をちゃんと読んでいなかったのと、最初の回答がコメントにあるように関係ない
|
|
1
|
+
質問文をちゃんと読んでいなかったのと、最初の回答がコメントにあるように関係ない指摘でしたので、回答を全面的に編集しました。すみません、ご指摘ありがとうございます。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
1
Swiperインスタンスをタブごとに作成
test
CHANGED
|
@@ -1,18 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
質問文をちゃんと読んでいなかったのと、最初の回答がコメントにあるように関係ない詩的でしたので、回答を全面的に編集しました。すみません。ご指摘ありがとうございます。
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
続きがあるときは、カンマありで、最後はカンマなしです。
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
```js
|
|
10
|
-
|
|
11
|
-
var obj1 = { prop1 : val1 }; //カンマなし
|
|
12
|
-
|
|
13
|
-
var obj2 = { prop1 : val1, prop2 : val2 }; //区切りだけカンマあり
|
|
14
|
-
|
|
15
|
-
```
|
|
16
2
|
|
|
17
3
|
|
|
18
4
|
|
|
@@ -20,13 +6,13 @@
|
|
|
20
6
|
|
|
21
7
|
|
|
22
8
|
|
|
23
|
-
|
|
9
|
+
`Swiper`というのは、作成してあるタブごとにインスタンスを作成しなければなりません。タブ１できちんと動いているということなので、同じオプションで問題ないのであれば下記のようにします。別々のオプションが必要な場合は、別々にセレクターで指定してインスタンスを作成します。
|
|
24
10
|
|
|
25
11
|
|
|
26
12
|
|
|
27
13
|
```js
|
|
28
14
|
|
|
29
|
-
|
|
15
|
+
var options = {
|
|
30
16
|
|
|
31
17
|
// Optional parameters
|
|
32
18
|
|
|
@@ -66,6 +52,24 @@
|
|
|
66
52
|
|
|
67
53
|
}
|
|
68
54
|
|
|
69
|
-
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
//#tab1
|
|
60
|
+
|
|
61
|
+
new Swiper('#tab1 .swiper-container', options);
|
|
62
|
+
|
|
63
|
+
//#tab2
|
|
64
|
+
|
|
65
|
+
new Swiper('#tab2 .swiper-container', options);
|
|
66
|
+
|
|
67
|
+
//...
|
|
70
68
|
|
|
71
69
|
```
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
下記でもサイトにサンプルがあるので、参考になるかと思います。（JavaScriptのソースは`/js/main.js`です）
|
|
74
|
+
|
|
75
|
+
[http://idangero.us/swiper/demos/](http://idangero.us/swiper/demos/)
|