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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

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

Q&A

解決済

1回答

1014閲覧

bxsliderでスライド中はスクロールを止めたい

kenshin

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

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

0グッド

0クリップ

投稿2020/02/19 11:36

bxsliderの呼び出し&オプション設定

swipeThreshold: 50, oneToOneTouch: true, preventDefaultSwipeX: true, preventDefaultSwipeY: false,

** //コールバック(アクションへのフック)**

onSliderLoad: function(){}, onSlideBefore: function(){}, onSlideAfter: function(){}, onSlideNext: function(){}, onSlidePrev: function(){}

bxsliderが反映されている部分スマホスワイプした時に上下に移動するので、 スワイプ中は上下のスクロールをとめたいのですが色々試してみたのですが、うまくいきません。

  考えて作ってみたのですが全然だめでした。

① onSliderLoad: function(){disable(preventDefaultSwipeY:false,); },

ちなみにこちらも参考にさしてもらいましたが、うまくいきませんでした。

/* フリック開始時 */ 'touchstart': function(e) { this.touchX = event.changedTouches[0].pageX; this.slideX = $(this).position().left; this.touchY = event.changedTouches[0].pageY; //←縦方向のタッチ位置も取得 }, /* フリック中 */ 'touchmove': function(e) { var moveX = this.touchX - event.changedTouches[0].pageX, moveY = this.touchY - event.changedTouches[0].pageY, //←縦方向のタッチ位置も取得 moveRate = moveX / moveY; //←フリックした縦横の移動量の比率を計算 //↓垂直方向から15度以上の方向にフリックした場合のみ、ページのスクロールをキャンセル if(moveRate > Math.tan(15 * Math.PI/180)) { e.preventDefault(); } this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX ); $(this).css({left:this.slideX}); this.accel = (event.changedTouches[0].pageX - this.touchX) * 5; this.touchX = event.changedTouches[0].pageX; }, /* フリック終了 */ 'touchend': function(e) { this.slideX += this.accel $(this).animate({left : this.slideX },200,'linear'); this.accel = 0; if (this.slideX > 0) { this.slideX = 0; $(this).animate({left:"0px"},500); } if (this.slideX < -(sldWidth - $(".box").width())) { this.slideX = -sldWidth; $(this).animate({left: -(sldWidth - $(".box").width()) + "px"},500); } } }); }); コード

一度スワイプしただけで、固まりました。ひょっとしたらコードの間違いがあったのかもしれませんが、、、

js

jQuery(function($){ $(document).ready(function(){ /****************************************** スクロール時に上部固定 *******************************************/ var tab = $('.tabContainer'); var tabT = tab.offset().top; var tabW = tab.width(); $(window).scroll(function(){ var winT = $(this).scrollTop(); if(winT>=tabT){ tab.css({position:'fixed',top:0,width:tabW,'z-index':2}); }else if(winT<=tabT){ tab.css({position:'relative',top:'auto',width:'auto','z-index':'auto'}); } }); /****************************************** 事前準備 *******************************************/ //タブボタンの数を取得 var tabQuentity = $('.tab__button').length; //タブの長さとボディの長さの差分を取得 var tabExtraDistance = $('.tab').width() - $('.tabContainer').width(); /****************************************** スライダー発動 *******************************************/ var slider = $('.contents').bxSlider({ pager:false, controls:false, onSlideBefore: function($slideElement, oldIndex, newIndex){ //スライドする時に関数を呼び出す。nexIndexはスライダーの現在地。 slideChange(newIndex); } }); /****************************************** スライドする時に発動する関数 *******************************************/ function slideChange(newIndex){ //クラスを調整 $('.tab__button').removeClass('active'); $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active'); //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地 var scrollDestination = ( tabExtraDistance / (tabQuentity - 1) ) * ( newIndex ); //スクロール位置を調整 $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow'); } /****************************************** タブボタンクリックで発動する関数 *******************************************/ $('.tab__button').on('click',function(e){ //何番目の要素かを取ってスライドを移動する var nth = $('.tab__button').index(this); slider.goToSlide(nth); //クリックイベントを無効化 e.preventDefault(); }) }); });

どなたか、わかればよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

自己解決

やっぱりbxsliderはちょっと、もとめる動きとちがうので、別のスライダーを使います。

投稿2020/02/20 10:03

kenshin

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問