1
hammer.jsを使用してタッチイベントでスライダを構築したところです。今はスライダーにドラッグ・エフェクトを追加するにはどうすればいいのか理解しようとしています。私は左スワイプまたは右の要素や、画面から指を離す前に、それは次のスライドhammer.jsを使用したドラッグアニメーションの追加
$(document).ready(function() {
\t $('.prev').on('click', function(e) {
\t event.stopPropagation();
\t // store variable relevent to clicked slider
\t var sliderWrapper = $(this).closest('.slider-wrapper'),
\t \t slideItems = sliderWrapper.find('.slide-items'),
\t slider = sliderWrapper.find('.slider'),
\t currentSlide = sliderWrapper.attr('data-slide');
\t // Check if data-slide attribute is greater than 0
\t if(currentSlide > 0) {
\t \t \t // Decremement current slide
\t \t \t currentSlide--;
\t \t \t // Assign CSS position to clicked slider
\t \t \t slider.css({'right' : currentSlide*slideItems.outerWidth() });
\t \t \t // Update data-slide attribute
\t \t \t sliderWrapper.attr('data-slide', currentSlide);
\t }
\t });
\t $('.next').on('click', function(e) {
\t event.stopPropagation();
\t // store variable relevent to clicked slider
\t \t var sliderWrapper = $(this).closest('.slider-wrapper'),
\t \t slideItems = sliderWrapper.find('.slide-items'),
\t \t slider = sliderWrapper.find('.slider'),
\t \t totalSlides = slideItems.length,
\t \t currentSlide = sliderWrapper.attr('data-slide');
\t \t // Check if dataslide is less than the total slides
\t \t if(currentSlide < totalSlides - 1) {
\t \t // Increment current slide
\t \t currentSlide++;
\t \t // Assign CSS position to clicked slider
\t \t slider.css({'right' : currentSlide*slideItems.outerWidth() });
\t \t // Update data-slide attribute
\t \t sliderWrapper.attr('data-slide', currentSlide);
\t \t }
\t })
\t $('.slider-wrapper').each(function(){
\t // create a simple instance
\t // by default, it only adds horizontal recognizers
\t var direction;
\t var mc = new Hammer(this),
\t itemLength = $(this).find('.slide-items').length,
\t count = 0,
\t slide = $(this);
\t \t var sliderWrapper = slide,
\t \t slideItems = sliderWrapper.find('.slide-items'),
\t \t slider = sliderWrapper.find('.slider'),
\t \t totalSlides = slideItems.length,
\t \t currentSlide = sliderWrapper.attr('data-slide');
\t
\t mc.on("panleft panright", function(ev) {
\t direction = ev.type;
\t });
\t mc.on("panend", function(ev) {
\t \t if(direction === "panleft") {
\t console.log('panleft');
\t \t \t \t // Check if dataslide is less than the total slides
\t \t \t \t if(currentSlide < totalSlides - 1) {
\t \t \t \t // Increment current slide
\t \t \t \t currentSlide++;
\t \t \t \t // Assign CSS position to clicked slider
\t \t \t \t slider.css({'right' : currentSlide*slideItems.outerWidth() });
\t \t \t \t // Update data-slide attribute
\t \t \t \t sliderWrapper.attr('data-slide', currentSlide);
\t \t \t \t }
\t \t }
\t \t if(direction === "panright") {
\t console.log('right');
\t \t \t // Check if data-slide attribute is greater than 0
\t \t \t if(currentSlide > 0) {
\t \t \t \t \t // Decremement current slide
\t \t \t \t \t currentSlide--;
\t \t \t \t \t // Assign CSS position to clicked slider
\t \t \t \t \t slider.css({'right' : currentSlide*slideItems.outerWidth() });
\t \t \t \t \t // Update data-slide attribute
\t \t \t \t \t sliderWrapper.attr('data-slide', currentSlide);
\t \t \t }
\t \t }
\t });
\t });
});
$(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>