サイトでタブをスライドで切り替える方法はありますでしょうか？

ウェブサイトでタブを使っているのですが、他のjqueryの影響を受けてうまくいきません。
bxsliderを使ったタブ切り替えも試しましたが、中身が収納されず全部見えてしまい機能しませんでした。

競合しにくい方法はあるのでしょうか？

宜しくお願いします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2016/10/06 15:47

ANo1です

ライブラリを指定いただいても、どのような使い方（設定）をしているのか不明なので、なんとも言えませんが・・・

ざっとサイトを眺めただけですが、両方ともレスポンシブに対応しているようですね。
多分、変数やスコープでの干渉はおきていないものと想像します。

LiquidSliderのほうはスライダーの準備処理として、各パネルに対していくつかのDIV要素を包含要素として追加生成しています。
ご提示のHTMLではUL-LIの構成になっていますが、サイトの例示ではDIV-DIVの構成になっています。
ULの構成だと、この直下にDIV要素が生成されることになり、HTML文法としておかしなものになるので、作者の意図するところではないと想像しますが…？
http://kevinbatdorf.github.io/liquidslider/examp …
（これがご質問の事象の直接の原因ではないと思いますが念のため）

一方の、imgLiquidはHTML内の指定した画像要素に対して、それを親要素の背景画像に設定して、オリジナルの画像はdisplay:noneとして表示しないようにしています。
こちらの例示では、ブロック要素を親要素とするようなイメージで説明されていますが、ご提示のHTMLではリンク要素が親要素となっており、子要素が非表示になったときにサイズが確保できるようになっているのか不明です。
（質問者様あるいはライブラリが確保していれば別です。でも、リンク要素はなぜ必要なのでしょう？）
https://github.com/karacas/imgLiquid

現状で、imgLiquidを単独設置しても動作していますか？
あるいは（ライブラリが対応してくれているかも知れませんが）、子要素のサイズが無くなった時でもサイズを確保できるようになっているでしょうか？
確認する方法の一つとして、各要素にborder: 1px solid redのような設定を一時的にしてみると、どのような表示になっているかが分かり易くなり確認しやすくなるでしょう。
（ボーダー設定のせいで表示が乱れる場合もあり得ますが…）
なんとなくの想像では、要素の高さが0となってしまって、表示されないように見えているだけではないかと思うのですが…


さらには、Windowをリサイズした時には、これらのライブラリはそれぞれが適正なサイズを再計算しているものと想像しますが、どちらが先に実行されるかは不定です。
（多くの場合は、設定した順に実行されるようですが、順序はブラウザ依存なので不定と言えます）
この時に、スライドするパネルのサイズ（あるいは画像の親要素のサイズ）が計算で変更されるような設定をしていると先に計算を行ったライブラリの想定する値が上書きされて矛盾が生じる可能性が考えられます。
（試したわけではないので、実際はどうかはわかりません）
ご質問文の状況からすると、これが原因とも特定はできませんが。

どのような実装をなさりたいのか不明ですが、要素のサイズの確定をライブラリの計算によらずに、出来る限りブラウザ本体が行えるような仕組みにしておくのが確実そうな気がします。

この回答へのお礼

ご返信遅くなり申し訳ないです。
何とか解決ができました。ありがとうございます。

お礼日時：2016/10/12 18:57

No.1 回答者： fujillin 回答日時： 2016/10/05 09:13

こんにちは

どのような状況で何が起こっているのかわかりませんが・・・

大抵のライブラリ化されたツールは、競合が起きないように配慮されているものが多いと思います。
そうはいっても、稀には競合するものもありますし、jQueryとprototypeなどのようにプラットフォームが競合する場合もあります。
jQuery利用のライブラリ同士で競合することは稀だと思いますが、jQueryのバージョンが限定されていて異なるものを利用しなければならない場合などでは、2種類のjQueryを共存させることが必要になる場合もあります。

とは言っても、上記は稀なケースで、ほとんどの場合は競合は起きないものと思います。
ただし、扱う対象要素が同じ要素であったり、関連する要素であったりする場合には、競合することも十分考えられます。
それぞれの機能を実現するために、スクリプト内でDOM構成を再編していたりすることがあるので、これによって互いに想定する文書構造とは異なるものになってしまって、正しく動作しなくなることはあり得るでしょう。
あるいは、一方が競合を避ける配慮をしていないスクリプトであったりする場合にも、もちろん起こり得ます。

＞競合しにくい方法はあるのでしょうか？
状況がまったく不明なので、一般論でしか考えられませんが・・・

ライブラリ化されたツールを利用することで、ほとんどの場合は解決するものと思います。
それぞれが同じ要素に対して何かの処理を行うような場合は、少し工夫が必要になるかも知れません。
それぞれの仕組みを理解した上で、HTMLの構造をうまく構成することで避けることができる可能性があるでしょう。
また、スコープの干渉などが原因の場合は、jQueryではnoConflictという仕組みを用意していますので、これを利用することで干渉を避けられる場合もあります。
http://api.jquery.com/jQuery.noConflict/

いずれにしろ、何が原因なのかを把握できないと、適切な対応方法はわからないのではないでしょうか。
当たるも八卦でいろいろ試してみて、当たるのを待つという方法もないことはないですが…

この回答へのお礼

ご返答ありがとうございます。
質問の内容がおおざっぱ過ぎました。申し訳ないです。
PCサイズでは通常通り表示できるのですが、スマホサイズにした時に内容が表示されなくなってしまうので、他のものを探しておりました。
そして他のものを試すと競合しているのか動かなかったという結果になっております。

今採用しているものでスマホサイズでも表示できれば、他のものに変更する必要はありませんが、何とも言えません。
使っているものは、http://liquidslider.com/
参考サイトは、
http://www.creators-gate.net/blogs/liquid-slider/

内容には、画像を入れておりまして、それにもプラグインを使用しております。
http://kwski.net/jquery/1077/

<div class="s_content">
<ul class="clearfix">
<li class="resize"><a href="#"><img src="images/img.jpg" alt=""></a></li>
<li class="resize"><a href="#"><img src="images/img.jpg" alt=""></a></li>
<li class="resize"><a href="#"><img src="images/img.jpg" alt=""></a></li>
</ul>
</div><!-- /s_content -->

現象としましては、内容がすべて抜けてしまいます。

お礼日時：2016/10/05 13:07