質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3375閲覧

タブ切り替えでスライダーがうまく表示させるには

a2s

総合スコア39

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/05/23 07:28

編集2016/05/26 04:02

###前提・実現したいこと
タブでの切り替えの中に、SliderProを使用したスライダーを入れたいです。
最初に表示されるタブ内のものはきちんと表示されますが、切り替えたタブ(タブ2)の方は以下のように、縮小で表示されてしまいます。
タブ切り替え
両方タブ内のスライダーを巧く表示させるためにはどうすれば良いのでしょうか…?
ご教授いただけると助かります。

以下ソースコードです。
※slider-pro.cssは初期のものから特に変更していません。

###html

<!doctype html> <html> <head lang="ja"> <title>タイトル</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no,address=no,email=no"> <link href="css/slider-pro.css" rel="stylesheet"> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/jquery.sliderPro.min.js"></script> <script src="js/script.js"></script> </head> <body> <div id="tab"> <div id="tab-btn"> <ul> <li class="present">タブ1</li> <li>タブ2</a></li> </ul> </div> </div> <div id="page1"> <div class="slider-pro" id="slider1"> <div class="sp-slides"> <div class="sp-slide"><img class="sp-image" src="01.png"></div> <div class="sp-slide"><img class="sp-image" src="02.png"></div> <div class="sp-slide"><img class="sp-image" src="03.png"></div> <div class="sp-slide"><img class="sp-image" src="04.png"></div> </div> </div> </div> <div id="page2"> <div class="slider-pro" id="slider2"> <div class="sp-slides"> <div class="sp-slide"><img class="sp-image" src="01.png"></div> <div class="sp-slide"><img class="sp-image" src="02.png"></div> <div class="sp-slide"><img class="sp-image" src="03.png"></div> <div class="sp-slide"><img class="sp-image" src="04.png"></div> </div> </div> </div> <script type="text/javascript"> tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('page1'), document.getElementById('page2') ] } tab.init(); /* for test tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.showpage(tab.setup.tabs[1]); } tab.dive(); */ </script> </body> </html>

###script.js

//スライダー部分 $(function() { $('#slider1').sliderPro({ width:'90%', aspectRatio:2, autoplay:false, buttons:true, slideDistance:8, loop:'false', visibleSize:'100%' }); $('#slider2').sliderPro({ width:'90%', aspectRatio:2, autoplay:false, buttons:true, slideDistance:8, loop:'false', visibleSize:'100%' }); }); //タブ切り替え部分 var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } this.dive(); }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'present'; }else{ pages[i].style.display = 'none'; tabs[i].className = null; } } }, dive: function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(pages[i] == document.getElementById(hash[1])) this.showpage(tabs[i]); } } } tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('page1'), document.getElementById('page2') ] } tab.init();

コメントの方に記載してしまったのですが、
タブjs内のshowpageにupdateを追記することでスライダーを両タブで表示させることができました。
ただ、タブ2のほうを開くと、スライダーの1枚目の画像が半透明になってしまっています。
(タブ1の方は、1枚目以外が半透明で、意図した表示です)
これを改善する記述はあるのでしょうか…?
【追記】スライダー部分、sp-slide:firstを指定することで自己解決いたしました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/23 07:46

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
a2s

2016/05/23 08:23

失礼しました。コード部分を囲みました。
guest

回答1

0

ベストアンサー

https://github.com/bqworks/slider-pro/blob/master/docs/api.md#javascript-apiを見ると
update()で更新できるようなのでタブを切り替えた際に該当タブ内のスライダーに対して
$('表示になるスライダーのセレクタ').sliderPro('update');
としてあげればいけそうです。

もしくは$('#slider2').sliderPro({・・・});のタイミングで該当のタブが非表示になっていることが原因だと思うのでタブを表示した際にsliderProを設定するようにしてみてはいかがでしょうか。

また非表示になる際に$('非表示になるスライダーのセレクタ').sliderPro('destroy'));で破棄してあげる必要があるかもしれません。

投稿2016/05/23 14:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

a2s

2016/05/24 04:15

ありがとうございます! タブjs内のshowpageにupdateを追記することで、両タブともにスライダーを表示することができました。 ただ、タブ2の時最初に表示される画像が半透明(1枚目だと認識されていない?)になってしまっています。これを改善する記述はあるのでしょうか…?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問