Пожалуйста, помогите мне найти решение, которое будет очень полезно для многих других людей после меня.BootStrap Переход на следующую вкладку из Карусели с плагином manos.malihu
У меня есть простая/стандартная карусель, выполненная в Bootstrapie. Проблема начинается, когда я хочу, чтобы проведите пальцем вправо или влево, перейдите к следующей или предыдущей вкладке в карусели в браузере в Android. Я знаю, что это масса плагинов, которые обеспечивают такую функциональность. Загрузочная карусель. Я использовал самый простой способ, используя компонентный «touch» от jQuery Mobile. Когда я пользуюсь настольным браузером (chrome, ff, opera) и используя мышь для прокрутки влево/вправо, все работает красиво (смена карточек). Однако, когда я использую браузер для Android, у меня нет такой возможности. Мой диагноз, почему это происходит (к сожалению, это так не зависит от плагина с включенным салфеткой, и я потерял много времени, пытаясь найти запущенный проверенный плагином hammer.js bootstrap-touch-carousel.js, slick.js, jquery.touchSwipe. js и т. д.). Причина в том, что я использую настраиваемую полосу прокрутки от plugin - manos.malihu. Мой диагноз состоит в том, чтобы найти часть кода в приведенном выше плагине: jquery.Custom Scrollbar.js, ответственный за салфетки (и блокирование салфетки, например, jQuery Mobile). Ниже я вставить код, ответственный за прикосновение в manos.malihu плагин:
/*
TOUCH SWIPE EVENTS
scrolls content via touch swipe
Emulates the native touch-swipe scrolling with momentum found in iOS, Android and WP devices
*/
_contentDraggable=function(){
var $this=$(this),d=$this.data(pluginPfx),o=d.opt,
namespace=pluginPfx+"_"+d.idx,
mCustomScrollBox=$("#mCSB_"+d.idx),
mCSB_container=$("#mCSB_"+d.idx+"_container"),
mCSB_dragger=[$("#mCSB_"+d.idx+"_dragger_vertical"),$("#mCSB_"+d.idx+"_dragger_horizontal")],
draggable,dragY,dragX,touchStartY,touchStartX,touchMoveY=[],touchMoveX=[],startTime,runningTime,endTime,distance,speed,amount,
durA=0,durB,overwrite=o.axis==="yx" ? "none" : "all",touchIntent=[],touchDrag,docDrag,
iframe=mCSB_container.find("iframe"),
events=[
"touchstart."+namespace+" pointerdown."+namespace+" MSPointerDown."+namespace, //start
"touchmove."+namespace+" pointermove."+namespace+" MSPointerMove."+namespace, //move
"touchend."+namespace+" pointerup."+namespace+" MSPointerUp."+namespace //end
],
touchAction=document.body.style.touchAction!==undefined;
mCSB_container.bind(events[0],function(e){
_onTouchstart(e);
}).bind(events[1],function(e){
_onTouchmove(e);
});
mCustomScrollBox.bind(events[0],function(e){
_onTouchstart2(e);
}).bind(events[2],function(e){
_onTouchend(e);
});
if(iframe.length){
iframe.each(function(){
$(this).load(function(){
/* bind events on accessible iframes */
if(_canAccessIFrame(this)){
$(this.contentDocument || this.contentWindow.document).bind(events[0],function(e){
_onTouchstart(e);
_onTouchstart2(e);
}).bind(events[1],function(e){
_onTouchmove(e);
}).bind(events[2],function(e){
_onTouchend(e);
});
}
});
});
}
function _onTouchstart(e){
if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
touchable=1; touchDrag=0; docDrag=0; draggable=1;
$this.removeClass("mCS_touch_action");
var offset=mCSB_container.offset();
dragY=_coordinates(e)[0]-offset.top;
dragX=_coordinates(e)[1]-offset.left;
touchIntent=[_coordinates(e)[0],_coordinates(e)[1]];
}
function _onTouchmove(e){
if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){return;}
if(!o.documentTouchScroll){e.preventDefault();}
e.stopImmediatePropagation();
if(docDrag && !touchDrag){return;}
if(draggable){
runningTime=_getTime();
var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left,
easing="mcsLinearOut";
touchMoveY.push(y);
touchMoveX.push(x);
touchIntent[2]=Math.abs(_coordinates(e)[0]-touchIntent[0]); touchIntent[3]=Math.abs(_coordinates(e)[1]-touchIntent[1]);
if(d.overflowed[0]){
var limit=mCSB_dragger[0].parent().height()-mCSB_dragger[0].height(),
prevent=((dragY-y)>0 && (y-dragY)>-(limit*d.scrollRatio.y) && (touchIntent[3]*2<touchIntent[2] || o.axis==="yx"));
}
if(d.overflowed[1]){
var limitX=mCSB_dragger[1].parent().width()-mCSB_dragger[1].width(),
preventX=((dragX-x)>0 && (x-dragX)>-(limitX*d.scrollRatio.x) && (touchIntent[2]*2<touchIntent[3] || o.axis==="yx"));
}
if(prevent || preventX){ /* prevent native document scrolling */
if(!touchAction){e.preventDefault();}
touchDrag=1;
}else{
docDrag=1;
$this.addClass("mCS_touch_action");
}
if(touchAction){e.preventDefault();}
amount=o.axis==="yx" ? [(dragY-y),(dragX-x)] : o.axis==="x" ? [null,(dragX-x)] : [(dragY-y),null];
mCSB_container[0].idleTimer=250;
if(d.overflowed[0]){_drag(amount[0],durA,easing,"y","all",true);}
if(d.overflowed[1]){_drag(amount[1],durA,easing,"x",overwrite,true);}
}
}
function _onTouchstart2(e){
if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){touchable=0; return;}
touchable=1;
e.stopImmediatePropagation();
_stop($this);
startTime=_getTime();
var offset=mCustomScrollBox.offset();
touchStartY=_coordinates(e)[0]-offset.top;
touchStartX=_coordinates(e)[1]-offset.left;
touchMoveY=[]; touchMoveX=[];
}
function _onTouchend(e){
if(!_pointerTouch(e) || touchActive || _coordinates(e)[2]){return;}
draggable=0;
e.stopImmediatePropagation();
touchDrag=0; docDrag=0;
endTime=_getTime();
var offset=mCustomScrollBox.offset(),y=_coordinates(e)[0]-offset.top,x=_coordinates(e)[1]-offset.left;
if((endTime-runningTime)>30){return;}
speed=1000/(endTime-startTime);
var easing="mcsEaseOut",slow=speed<2.5,
diff=slow ? [touchMoveY[touchMoveY.length-2],touchMoveX[touchMoveX.length-2]] : [0,0];
distance=slow ? [(y-diff[0]),(x-diff[1])] : [y-touchStartY,x-touchStartX];
var absDistance=[Math.abs(distance[0]),Math.abs(distance[1])];
speed=slow ? [Math.abs(distance[0]/4),Math.abs(distance[1]/4)] : [speed,speed];
var a=[
Math.abs(mCSB_container[0].offsetTop)-(distance[0]*_m((absDistance[0]/speed[0]),speed[0])),
Math.abs(mCSB_container[0].offsetLeft)-(distance[1]*_m((absDistance[1]/speed[1]),speed[1]))
];
amount=o.axis==="yx" ? [a[0],a[1]] : o.axis==="x" ? [null,a[1]] : [a[0],null];
durB=[(absDistance[0]*4)+o.scrollInertia,(absDistance[1]*4)+o.scrollInertia];
var md=parseInt(o.contentTouchScroll) || 0; /* absolute minimum distance required */
amount[0]=absDistance[0]>md ? amount[0] : 0;
amount[1]=absDistance[1]>md ? amount[1] : 0;
if(d.overflowed[0]){_drag(amount[0],durB[0],easing,"y",overwrite,false);}
if(d.overflowed[1]){_drag(amount[1],durB[1],easing,"x",overwrite,false);}
}
function _m(ds,s){
var r=[s*1.5,s*2,s/1.5,s/2];
if(ds>90){
return s>4 ? r[0] : r[3];
}else if(ds>60){
return s>3 ? r[3] : r[2];
}else if(ds>30){
return s>8 ? r[1] : s>6 ? r[0] : s>4 ? s : r[2];
}else{
return s>8 ? s : r[3];
}
}
function _drag(amount,dur,easing,dir,overwrite,drag){
if(!amount){return;}
_scrollTo($this,amount.toString(),{dur:dur,scrollEasing:easing,dir:dir,overwrite:overwrite,drag:drag});
}
},
Я вижу, что в настольном браузере используется красть из JQuery мобильного телефона. Изменение карт из карусели выполняется с помощью мыши (нажмите левую кнопку мыши и перетащите влево или вправо). код с прикосновением с помощью JQuery мобильного телефона:
$('.carousel').swiperight(function() {
$(this).carousel('prev');
});
$('.carousel').swipeleft(function() {
$(this).carousel('next');
});
После многих попыток я можу сделать изменения в «jquery.mCustomScrollbar.js» такого, чтобы получить ту же функциональность в браузере Android с прикосновением пальца. Мой вызов функции из «jquery.mCustomScrollbar.js»:
jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 100});
Для вас это будет проще, чем для меня, чтобы добавить/изменить фрагмент кода в jquery.mCustomScrollbar.js, чтобы получить аналогичные функциональные возможности для обоих браузеров (рабочий стол , андроид).
P.S. Я предупреждаю вас, когда я использую:
contentTouchScroll: false
На самом деле, у меня есть аналогичные функции на обоих браузерах, но это не так, потому что я блокировать возможность прокрутки вверх/вниз с сенсорным (прикосновением) пальцем вверх/вниз.
Издание сообщило о GitHub creator plugin
[но я предполагаю, что поддержка со стороны создателей, а это не возможно в данный момент]
Я был бы очень благодарен за вашу помощь. Я потерял слишком много времени, пытаясь решить проблему самостоятельно
С уважением ZIC