-
ID:CisrMZ さんの質問

はじめまして、web制作初心者です。
jQueryのbxSliderというものを使いブラウザの幅が特定のピクセル以下の場合だけスライダーを動作させ、それ以外の場合は動作させる前の状態にしたいと考えています。

$(window).on(’load resize’, function(){
var w = $(window).width();
var x = 768;
if (w <= x) {
$(’.bxslider’).bxSlider();
}
else {

}
});

bxsliderのサイト(http://bxslider.com/)にいくとオブションのパブリックメソッドというものの中にdestroySliderというものがありました。

example:
slider = $(’.bxslider’).bxSlider();
slider.destroySlider();

これをelseの中にいれれば良いのかと考えたのですが動作しませんでした。
助けていただけると幸いです。
よろしくお願いします。

みんなの回答 3 件

ID:aA/Ai/ さんの回答

スマホ対策ですか?

ID:aA/Ai/

ちなみに、ifのtrueでbxsliderいれてるけど、そいつも変数つかってやらないと意味ないよ。
if (w <= x) {
slider = $(’.bxslider’).bxSlider();
}
else {
slider.destroySlider();
}

ID:CZ4F1G

回答ありがとうございます!
おっしゃるとおりで、スマホの場合のみにスライダーにしようと考えています。

<script type="text/javascript">
$(window).on(’load resize’, function(){
var w = $(window).width();
var x = 768;
if (w <= x) {
slider = $(’.bxslider’).bxSlider();
}
else {
slider.destroySlider();
}
});
</script>

といれてみたのですが、ブラウザで確認してみるとブラウザのサイズが特定以上の場合から特定以下に変更した場合はスライダーが作用するのですが、その状態からブラウザの幅を特定のサイズ以上に変更してもスライダーが解除されません。再度読み込みをし直すと解除されます。
以下のサイズから以上のサイズにリサイズをしていて特定のサイズを越えた瞬間からスライダーが解除されるというのは難しいのでしょうか。
なんども申し訳ありませんが、何か対策はありますでしょうか。
よろしくお願いします。

ID:aA/Ai/

スマホなら、ユーザーエージェントで判別して最初のload時のみで判別したほいうがいいでしょ。
var _sp = false;
if ((navigator.userAgent.indexOf(’iPhone’) > 0 && navigator.userAgent.indexOf(’iPad’) == -1) || navigator.userAgent.indexOf(’iPod’) > 0 || (navigator.userAgent.indexOf(’Android’) > 0 && navigator.userAgent.indexOf(’Mobile’) > 0)){
_sp = true;
}
$(window).on(’load resize’, function(){
if(_sp){
$(’.bxslider’).bxSlider();
}
});

これでいいんじゃない?

ID:aA/Ai/

ごめん、上のload resizeのresize削除で。

ID:di19YS さんの回答

動くヤツと動かないヤツ2つ並べておいて
ウィンドウ幅に応じて表示・非表示すれってのはダメ?

ID:rpPToK

ダメだろ。

ID:CZ4F1G

案を出していただいてありがとうございます。
初心者のくせに申し訳ありませんが、できればもう少しスマートな方法だと助かります。

ID:n5mDKw さんの回答

一度プラグインを設定しちゃうと、解除はなかなか難しい。.bxSlider() する前に $(’.bxslider ’) を変数に保存しておき、解除したい時はオブジェクトごと削除すれば? で、再開する時は保存しといた $(’bxslider’) を書き戻して .bxSlider() すればいい。

最終更新日:2015-07-31 (5,859 views)

関連するトピックス

ページ上部に戻る