12
Tôi đã tạo hai loại chức năng trong việc điều khiển thanh trượt mà tôi đã tạo. Một là các nút có điều khiển định hướng và các nút khác là các sự kiện chạm/vuốt. Làm thế nào có thể đồng bộ cả trong số họ để khi tôi bấm trước/sau các sự kiện swipe cũng được cập nhật và ngược lạiĐiều khiển hướng đồng bộ hóa với các sự kiện vuốt
$(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 .slider').each(function(){
\t // create a simple instance
\t // by default, it only adds horizontal recognizers
\t
\t var direction;
var touchSlider = this;
var activeSlide = 0;
\t var mc = new Hammer.Manager(this),
\t itemLength = $(this).find('.slide-items').length,
\t count = 0,
\t slide = $(this);
\t
\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 // });
mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }))
\t mc.on('pan', function(e) { \t
var percentage = 100/totalSlides * e.deltaX/window.innerWidth;
var transformPercentage = percentage - 100/totalSlides * activeSlide;
touchSlider.style.transform = 'translateX(' + transformPercentage + '%)';
\t \t \t if(e.isFinal) { // NEW: this only runs on event end
\t \t \t if(percentage < 0)
\t \t \t goToSlide(activeSlide + 1);
\t \t \t else if(percentage > 0)
\t \t \t goToSlide(activeSlide - 1);
\t \t \t else
\t \t \t goToSlide(activeSlide);
\t \t \t }
\t });
\t \t var goToSlide = function(number) {
\t \t if(number < 0)
\t \t activeSlide = 0;
\t \t else if(number > totalSlides - 1)
\t \t activeSlide = totalSlides - 1
\t \t else
\t \t activeSlide = number;
\t \t touchSlider.classList.add('slide-animation');
\t \t var percentage = -(100/totalSlides) * activeSlide;
\t \t touchSlider.style.transform = 'translateX(' + percentage + '%)';
\t \t timer = setTimeout(function() {
\t \t touchSlider.classList.remove('slide-animation');
\t \t }, 400);
\t \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);
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;
display: block; }
.container .slider-wrapper .slider {
position: relative;
right: 0;
display: flex;
flex-wrap: wrap;
overflow: hidden;
/*-webkit-transition : transform 0.3s linear;*/ }
.container .slider-wrapper .slider.slide-animation {
-webkit-transition: transform 0.3s linear; }
.container .slider-wrapper .slider > div {
padding: 10px;
background-color: #e5d0d0;
height: 200px; }
.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.7/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>1</p>
</div>
<div class="slide-items">
<p>2</p>
</div>
<div class="slide-items">
<p>3</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>1</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>2</p>
</div>
<div class="slide-items">
<p>3</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>1</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>1</p>
</div>
<div class="slide-items">
<p>2</p>
</div>
</div>
<div class="buttons">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div>
</div>