Написал используя Hammer.js версии 1.0.5 слайдер по примеру
codepen.io
Все прекрасно работает, но есть небольшой тормоз (заметно на видео) при листании немного тормозит у краев. Я заметил что в этот момент Hammer.js просто не работает. В консоль начал выводить действия hammer js (вывод события, имя события). При Drag туда сюда в центре все прекрасно работает, а при слайде на другую (именно когда перетаскиваю к краю) определенный промежуток пикселей, там не работает Hammer.js. Пример на видео. В чем может быть дело?
Видео с примером
Вот код
var self = this,
container = $('.works'),
panes = $(".work-item"),
pane_width = container.width(),
pane_count = panes.length,
current_pane = 1,
transition = 600,
fps = 60,
drag = 0;
/* Анимация объектп */
function setContainerOffset(percent, event, animate) {
var current_page = $(event.currentTarget),
prev_page = current_page.prev(),
next_page = current_page.next();
/* Анимация при прекрашении перетаскивания */
if (animate){
current_page.addClass("animate");
next_page.addClass("animate");
prev_page.addClass("animate");
} else {
if (current_page.hasClass('animate') || next_page.hasClass('animate') || prev_page.hasClass('animate')){
current_page.removeClass("animate");
next_page.removeClass("animate");
prev_page.removeClass("animate");
}
}
/* Значения */
var real_percent = percent <= -100 ? -100 : percent >= 100 ? 100 : percent,
next_scale,
next_opacity,
next_tranf_rotate,
current_opacity,
prev_percent;
if (event.gesture.direction === 'left'){
prev_percent = (percent - 100);
next_scale = Math.abs(((real_percent / 100) * 0.10)- 0.90);
next_opacity = Math.abs(((real_percent / 100) * 0.67) - 0.33);
next_tranf_rotate = ((real_percent / 25)) + 4;
/* Трансформация объектов */
current_page.css("transform", "translateX("+ percent +"%)");
next_page.css("opacity", next_opacity);
next_page.css("transform", "perspective(500px) translateX(-"+ next_tranf_rotate +"%) scale("+ next_scale +") rotateY(-"+ next_tranf_rotate +"deg)");
if (current_page === 1){
prev_page.css("transform","translateX("+ prev_percent +"%)" );
}
/* Стилизация */
current_page.css('opacity', 1);
} else if (event.gesture.direction === 'right' && current_pane !== 1){
current_opacity = Math.abs((((100 - real_percent ) / 100) * 0.67) + 0.33);
next_scale = Math.abs((((100 - real_percent ) / 100) * 0.10) + 0.90);
next_tranf_rotate = ((real_percent / 25));
prev_percent = (100 - percent);
/* Трансформация объектов */
prev_page.css("transform", "translateX(-"+ prev_percent +"%)");
current_page.css("opacity", current_opacity);
current_page.css("transform", "perspective(500px) translateX(-"+ next_tranf_rotate +"%) scale("+ next_scale +") rotateY(-"+ next_tranf_rotate +"deg)");
/* Блокируем предыдушию страницу */
next_page.removeClass('visible');
//current_page.css('opacity', 1);
} else if (event.gesture.direction === 'right' && current_pane === 1){
current_page.css("transform", "translateX("+ percent +"%)");
next_page.removeClass('visible');
}
}
/* Методы Вперед/Назад */
this.next = function(event, hide){
if (current_pane >= pane_count){
this.showPane(0, event, true);
} else {
this.showPane(-100, event, true);
current_pane++;
container.addClass('active');
if (hide){
var current_page = $(event.currentTarget),
prev_page = current_page.prev(),
next_page = current_page.next();
setTimeout(function (){
if (current_pane > 1){
current_page.removeClass('visible');
prev_page.removeClass('visible');
} else {
current_page.removeClass('visible');
}
container.removeClass('active');
}, transition);
}
}
};
this.prev = function(event, hide){
if (current_pane <= 1){
this.showPane(0, event, true);
} else {
container.addClass('active');
var current_page = $(event.currentTarget),
prev_page = current_page.prev(),
next_page = current_page.next();
this.showPane(100, event, true);
current_pane--;
if (hide){
setTimeout(function (){
current_page.removeClass('visible');
container.removeClass('active');
}, transition);
}
}
};
// Отображение слайдов
this.showPane = function(index, event, animate){
setContainerOffset(index, event, animate);
};
panes.hammer({
dragLockToAxis: true,
prevent_default: true,
stop_browser_behavior: true,
drag_min_distance: 0
}).on("release dragleft dragright swipeleft swiperight", function (ev){
ev.gesture.preventDefault();
var current_page = $(ev.currentTarget),
prev_page = current_page.prev(),
next_page = current_page.next();
switch (ev.type){
case 'dragright':
case 'dragleft':
// Первая страциа пропадает при слайде со второй
if (ev.type === 'dragleft' && current_pane > 1 ){
prev_page.removeClass('visible');
next_page.addClass('visible');
} else if (ev.type === 'dragleft' && current_pane === 1){
next_page.addClass('visible');
} else if (ev.type === 'dragright' && current_pane > 1) {
prev_page.addClass('visible');
}
/* Тач действия */
var drag_offset = ((100/pane_width) * ev.gesture.deltaX);
// Тормозить на первой и последней панели
if((current_pane == 1 && ev.gesture.direction == "right") || (current_pane == pane_count && ev.gesture.direction == "left")) {
drag_offset *= .10;
}
setContainerOffset(drag_offset, ev);
break;
case 'swipeleft':
self.next(ev, true);
ev.gesture.stopDetect();
break;
case 'swiperight':
self.prev(ev, true);
ev.gesture.stopDetect();
break;
case 'release':
// more then 50% moved, navigate
pane_width = $('.works').width();
if(Math.abs(ev.gesture.deltaX) > pane_width / 3) {
if(ev.gesture.direction == 'right' ) {
self.prev(ev, true);
} else {
self.next(ev, true);
}
} else {
self.showPane(0, ev, true);
if (ev.gesture.direction === 'left'){
container.addClass('release');
setTimeout(function (){
container.removeClass('release');
next_page.removeClass('visible');
}, transition);
} else if (ev.gesture.direction === 'right'){
}
}
break;
}
});
