###前提・実現したいこと
タブでの切り替えの中に、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を指定することで自己解決いたしました。
回答1件
あなたの回答
tips
プレビュー