質問文をちゃんと読んでいなかったのと、最初の回答がコメントにあるように関係ない指摘でしたので、回答を全面的に編集しました。すみません、ご指摘ありがとうございます。
JavaScriptを下記のようにしてみてください。
Swiperというのは、作成してあるタブごとにインスタンスを作成しなければなりません。タブ１できちんと動いているということなので、同じオプションで問題ないのであれば下記のようにします。別々のオプションが必要な場合は、別々にセレクターで指定してインスタンスを作成します。
試してないので不具合があるかもしれませんが、ポイントとしては、タブがクリックされて、フェードイン完了時にSwiperインスタンスを作成すればよいと思います。
- タブクリック
- フェードイン
- Swiperインスタンス作成（フェードインが終わったら）
※注意点
- 初期タブは上記と関係なくSwiperインスタンスを作成します。
- 後で同じタブをクリックしたときに、作成済みインスタンスで実行できるので、インスタンスを配列などに入れて記憶しておきます。
js
1(function($) {
2 $(document).ready(function() {
3 $('.tab_area:first').show();
4 $('.tab li:first').addClass('active');
5
6 //タブ切替
7 $('.tab li').click(function() {
8 $('.tab li').removeClass('active');
9 $(this).addClass('active');
10 $('.tab_area').hide();
11 //fadeIn()をインラインへ移動
12 return false;
13 });
14 });
15})(jQuery);
インラインのJavaScriptを下記のようにします。
js
1var options = {
2 // Optional parameters
3 direction: 'horizontal',
4 loop: true,
5
6 // If we need pagination
7 pagination: {
8 el: '.swiper-pagination'
9 },
10
11 // Navigation arrows
12 navigation: {
13 nextEl: '.swiper-button-next',
14 prevEl: '.swiper-button-prev'
15 },
16
17 // And if we need scrollbar
18 scrollbar: {
19 el: '.swiper-scrollbar'
20 }
21};
22
23var swipers = [];
24
25//タブ切替
26$('.tab li').click(function() {
27 //タブのフェードインが完了したら、Swiperを動作させる
28 $($(this).find('a').attr('href')).fadeIn(400, 'swing', function() {
29 var currentId = $(this).attr('id');
30
31 //#tabX Swiper作成
32 if ($.type(swipers[currentId]) !== 'object') {
33 swipers[currentId] = new Swiper('#'+ currentId +' .swiper-container', options);
34 }
35 });
36 return false;
37});
38
39//#tab1（初期タブ） Swiper作成
40swipers['tab1'] = new Swiper('#tab1 .swiper-container', options);
下記でもサイトにサンプルがあるので、参考になるかと思います。（JavaScriptのソースは/js/main.jsです）
http://idangero.us/swiper/demos/
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/28 07:12
2017/12/28 07:12
2017/12/28 09:35
2017/12/28 11:14