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

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

ただいまの
回答率

90.49%

  • JavaScript

    16957questions

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

  • HTML

    9251questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 992

a2s

score 16

前提・実現したいこと

タブでの切り替えの中に、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を指定することで自己解決いたしました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/23 16:46

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

    キャンセル

  • a2s

    2016/05/23 17:23

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

    キャンセル

回答 1

checkベストアンサー

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/24 13:15

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16957questions

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

  • HTML

    9251questions

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