我刚刚使用hammer.js完成了触摸事件的滑块构建。现在我想弄清楚如何在滑块上添加拖动效果。基本上这个概念是我在从元素或屏幕释放手指之前向左或向右滑动，它会将滑块30px向左或向右拖动，然后滑动到下一张幻灯片
$(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').each(function(){
// create a simple instance
// by default, it only adds horizontal recognizers
var direction;
var mc = new Hammer(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.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 / 2 );
sliderBox.width( slideItems.outerWidth() * items );
});
});/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
box-sizing: border-box; }
.container {
max-width: 1280px;
margin: 0 auto; }
.container .slider-wrapper {
margin-bottom: 40px;
background-color: grey;
overflow: hidden; }
.container .slider-wrapper .slider {
position: relative;
right: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden; }
.container .slider-wrapper .slider > div {
padding: 10px;
background-color: #e5d0d0; }
.container .slider-wrapper .slider > div p {
color: purple; }
.container .slider-wrapper .buttons {
display: flex;
justify-content: space-between;
background: beige;
padding: 10px 0; }
.container .slider-wrapper .buttons div {
background-color: cyan; }
/*# sourceMappingURL=style.css.map */<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
</div>
答案 0 :(得分：0)
我修改了代码中的内容。这与你想做的相似吗？
$(document).ready(function() {
$('.prev').on('click', function(e) {
e.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) {
e.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').each(function(){
// create a simple instance
// by default, it only adds horizontal recognizers
var direction;
var mc = new Hammer(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');
var dragDist = 40;
var dist = 0;
var curPosition = 0;
var toPosition = 0;
mc.on("panleft panright", function(ev) {
direction = ev.type;
// modified
dist = ev.deltaX;
var maxDist = Math.min(dragDist, dist);
curPosition = currentSlide*slideItems.outerWidth();
toPosition = curPosition + maxDist*-1;
slider.css({'right': toPosition + 'px'});
});
mc.on("panend", function(ev) {
slider.css({'right': curPosition + 'px'});
if( Math.abs(dist) <= dragDist ){
return;
}
if(direction === "panleft") {
console.log('pan left');
// 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('pan 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 / 2 );
sliderBox.width( slideItems.outerWidth() * items );
});
});/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
box-sizing: border-box; }
.container {
max-width: 1280px;
margin: 0 auto; }
.container .slider-wrapper {
margin-bottom: 40px;
background-color: grey;
overflow: hidden; }
.container .slider-wrapper .slider {
position: relative;
right: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden; }
.container .slider-wrapper .slider > div {
padding: 10px;
background-color: #e5d0d0; }
.container .slider-wrapper .slider > div p {
color: purple; }
.container .slider-wrapper .buttons {
display: flex;
justify-content: space-between;
background: beige;
padding: 10px 0; }
.container .slider-wrapper .buttons div {
background-color: cyan; }
/*# sourceMappingURL=style.css.map */<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
<div class="slider-wrapper" data-slide="0">
<div class="slider">
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
<div class="slide-items">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
</div>