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(); }) }); });
どなたか、わかればよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。