我已经构建了两种功能来控制我构建的滑块。一个是带方向控制的按钮，另一个是触摸/滑动事件。如何同步它们，以便当我按上一个/下一个时，滑动事件也会更新，反之亦然
ngOnInitonSubmit$(document).ready(function() {
$('.prev').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
currentSlide = sliderWrapper.attr('data-slide');
// Check if data-slide attribute is greater than 0
if( currentSlide > 0 ) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
});
$('.next').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = sliderWrapper.attr('data-slide');
// Check if dataslide is less than the total slides
if( currentSlide < totalSlides - 1 ) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
slider.css({'right' : currentSlide*slideItems.outerWidth() });
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
}
})
$('.slider-wrapper .slider').each(function(){
// create a simple instance
// by default, it only adds horizontal recognizers
var direction;
var touchSlider = this;
var activeSlide = 0;
var mc = new Hammer.Manager(this),
itemLength = $(this).find('.slide-items').length,
count = 0,
slide = $(this);
var sliderWrapper = slide,
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = sliderWrapper.attr('data-slide');
// mc.on("panleft panright", function(ev) {
// direction = ev.type;
// });
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }))
mc.on('pan', function(e) {
var percentage = 100 / totalSlides * e.deltaX / window.innerWidth;
var transformPercentage = percentage - 100 / totalSlides * activeSlide;
touchSlider.style.transform = 'translateX( ' + transformPercentage + '% )';
if( e.isFinal ) { // NEW: this only runs on event end
if( percentage < 0 )
goToSlide( activeSlide + 1 );
else if( percentage > 0 )
goToSlide( activeSlide - 1 );
else
goToSlide( activeSlide );
}
});
var goToSlide = function( number ) {
if( number < 0 )
activeSlide = 0;
else if( number > totalSlides - 1 )
activeSlide = totalSlides - 1
else
activeSlide = number;
touchSlider.classList.add('slide-animation');
var percentage = -( 100 / totalSlides ) * activeSlide;
touchSlider.style.transform = 'translateX( ' + percentage + '% )';
timer = setTimeout( function() {
touchSlider.classList.remove('slide-animation');
}, 400);
};
// mc.on("panend", function(ev) {
// if(direction === "panleft") {
// console.log('panleft');
// // Check if dataslide is less than the total slides
// if( currentSlide < totalSlides - 1 ) {
// // Increment current slide
// currentSlide++;
// // Assign CSS position to clicked slider
// slider.css({'right' : currentSlide*slideItems.outerWidth() });
// // Update data-slide attribute
// sliderWrapper.attr('data-slide', currentSlide);
// }
// }
// if(direction === "panright") {
// console.log('right');
// // Check if data-slide attribute is greater than 0
// if( currentSlide > 0 ) {
// // Decremement current slide
// currentSlide--;
// // Assign CSS position to clicked slider
// slider.css({'right' : currentSlide*slideItems.outerWidth() });
// // Update data-slide attribute
// sliderWrapper.attr('data-slide', currentSlide);
// }
// }
// });
});
});
$(window).on('load', function() {
$('.slider-wrapper').each(function() {
var slideItems = $(this).find('.slide-items'),
items = slideItems.length,
sliderBox = $(this).find('.slider'),
sliderWrapperWidth = $(this).width();
slideItems.outerWidth( sliderWrapperWidth );
sliderBox.width( slideItems.outerWidth() * items );
});
});
答案 0 :(得分：4)
你有多个问题：
index.cshtml插件使用translateX定位它，而您尝试使用css hammer进行定位。right的{{1}}而attr使用了.slider-wrapper变量。我修复了两者以使用hammer，将activeSlide变量移到translateX函数范围之外，并确保每个更改都会影响这两个变量。
我们可以删除其中一个变量并仅使用
activeSlide值的节点，但我会留给您：）
以下是工作片段：
$('.slider-wrapper .slider').eachattr$(document).ready(function() {
var activeSlide = 0;
$('.prev').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
totalSlides = slideItems.length,
slider = sliderWrapper.find('.slider'),
currentSlide = parseInt(sliderWrapper.attr('data-slide'));
// Check if data-slide attribute is greater than 0
if (currentSlide > 0) {
// Decremement current slide
currentSlide--;
// Assign CSS position to clicked slider
var transformPercentage = -1 * currentSlide / totalSlides * 100;
slider.css('transform', 'translateX(' + transformPercentage + '% )');
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
activeSlide = currentSlide;
}
});
$('.next').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var sliderWrapper = $(this).closest('.slider-wrapper'),
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = parseInt(sliderWrapper.attr('data-slide'));
// Check if dataslide is less than the total slides
if (currentSlide < totalSlides - 1) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
var transformPercentage = -1 * currentSlide / totalSlides * 100;
slider.css('transform', 'translateX(' + transformPercentage + '% )');
// Update data-slide attribute
sliderWrapper.attr('data-slide', currentSlide);
activeSlide = currentSlide;
}
})
$('.slider-wrapper .slider').each(function() {
// create a simple instance
// by default, it only adds horizontal recognizers
var direction;
var touchSlider = this;
var mc = new Hammer.Manager(this),
itemLength = $(this).find('.slide-items').length,
count = 0,
slide = $(this);
var sliderWrapper = slide,
slideItems = sliderWrapper.find('.slide-items'),
slider = sliderWrapper.find('.slider'),
totalSlides = slideItems.length,
currentSlide = parseInt(sliderWrapper.attr('data-slide'));
// mc.on("panleft panright", function(ev) {
// direction = ev.type;
// });
mc.add(new Hammer.Pan({
threshold: 0,
pointers: 0
}))
mc.on('pan', function(e) {
var percentage = 100 / totalSlides * e.deltaX / window.innerWidth;
var transformPercentage = percentage - 100 / totalSlides * activeSlide;
touchSlider.style.transform = 'translateX( ' + transformPercentage + '% )';
var sliderWrapper = $(e.target).closest('.slider-wrapper')
if (e.isFinal) { // NEW: this only runs on event end
var newSlide = activeSlide;
if (percentage < 0)
newSlide = activeSlide + 1;
else if (percentage > 0)
newSlide = activeSlide - 1;
goToSlide(newSlide, sliderWrapper);
}
});
var goToSlide = function(number, sliderWrapper) {
if (number < 0)
activeSlide = 0;
else if (number > totalSlides - 1)
activeSlide = totalSlides - 1
else
activeSlide = number;
sliderWrapper.attr('data-slide', activeSlide);
touchSlider.classList.add('slide-animation');
var percentage = -(100 / totalSlides) * activeSlide;
touchSlider.style.transform = 'translateX( ' + percentage + '% )';
timer = setTimeout(function() {
touchSlider.classList.remove('slide-animation');
}, 400);
};
});
});
$(window).on('load', function() {
$('.slider-wrapper').each(function() {
var slideItems = $(this).find('.slide-items'),
items = slideItems.length,
sliderBox = $(this).find('.slider'),
sliderWrapperWidth = $(this).width();
slideItems.outerWidth(sliderWrapperWidth);
sliderBox.width(slideItems.outerWidth() * items);
});
});