8
Je viens de terminer la construction de mon curseur de carrousel avec des événements tactiles pour un site Web que je construis. J'essaie actuellement de comprendre comment je peux désactiver les événements tactiles (hammer) en utilisant des événements de clic. Voici le code que je travaille surDésactivation des événements tactiles hammer.js à l'aide de l'événement onclick
La classe .slider-layout permet au carrousel tandis que la classe .tile-layout désactiver le carrousel et transforme la mise en page en vue de la carte mise en page
Mise à jour # 1
J'ai essayé de supprimer la classe qui lie le hammer.js mais ne fonctionnait pas.
var activeSlide = 0;
$('.faculty-carousel').attr('data-slide', '0');
$('.tile-layout').on('click', function() {
$('.faculty-items').each(function() {
$(this).addClass('tile-view');
})
})
$('.prev').on('click', function(e) {
event.stopPropagation();
var carouselWrapper = $(this).closest('.faculty-carousel'),
facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
facultyProfileCount = facultyProfilePanel.length,
viewPortSize = $(window).width(),
carousel = carouselWrapper.find('.faculty-items'),
position = 0,
currentSlide = parseInt(carouselWrapper.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/facultyProfileCount * 100;
carousel.css('transform', 'translateX(' + transformPercentage + '%)');
// Update data-slide attribute
carouselWrapper.attr('data-slide', currentSlide);
activeSlide = currentSlide;
}
});
$('.next').on('click', function(e) {
event.stopPropagation();
// store variable relevent to clicked slider
var carouselWrapper = $(this).closest('.faculty-carousel'),
facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
facultyProfileCount = facultyProfilePanel.length,
viewPortSize = $(window).width(),
carousel = carouselWrapper.find('.faculty-items'),
position = 0,
currentSlide = parseInt(carouselWrapper.attr('data-slide'));
// Check if dataslide is less than the total slides
if (currentSlide < facultyProfileCount - 1) {
// Increment current slide
currentSlide++;
// Assign CSS position to clicked slider
var transformPercentage = -1 * currentSlide/facultyProfileCount * 100;
carousel.css('transform', 'translateX(' + transformPercentage + '%)');
// Update data-slide attribute
carouselWrapper.attr('data-slide', currentSlide);
activeSlide = currentSlide;
}
})
function touchCarousel() {
$('.faculty-carousel .faculty-items').each(function() {
// create a simple instance
// by default, it only adds horizontal recognizers
var direction,
touchSlider = this,
mc = new Hammer.Manager(this),
itemLength = $(this).find('li').length,
count = 0,
slide = $(this),
timer;
var sliderWrapper = slide,
slideItems = sliderWrapper.find('li'),
//slider = sliderWrapper.find('li'),
totalPanels = 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/totalPanels * e.deltaX/window.innerWidth;
var transformPercentage = percentage - 100/totalPanels * activeSlide;
touchSlider.style.transform = 'translateX(' + transformPercentage + '%)';
var sliderWrapper = $(e.target).closest('.faculty-carousel')
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 > totalPanels - 1)
activeSlide = totalPanels - 1
else
activeSlide = number;
sliderWrapper.attr('data-slide', activeSlide);
touchSlider.classList.add('slide-animation');
var percentage = -(100/totalPanels) * activeSlide;
touchSlider.style.transform = 'translateX(' + percentage + '%)';
timer = setTimeout(function() {
touchSlider.classList.remove('slide-animation');
}, 400);
};
});
}
function panelSizing() {
// var activeSlide = 0;
// $('.faculty-carousel').attr('data-slide', '0');
var viewPortSize = $(window).width(),
carouselWrapper = $('.faculty-carousel')
;
//Set Panel Size based on viewport
if (viewPortSize <= 1920) {
var profilePanelSize = viewPortSize/5
}
if (viewPortSize < 1024) {
var profilePanelSize = viewPortSize/4
}
if (viewPortSize < 768) {
var profilePanelSize = viewPortSize/3
}
if (viewPortSize < 480) {
var profilePanelSize = viewPortSize
}
carouselWrapper.each(function(){
var wrapper = $(this);
// wrapper.attr('data-slide', '0');
var facultyPanel = wrapper.find('.faculty-items li'),
profileCount = facultyPanel.length,
// activeSlide = 0,
carousel = wrapper.find('.faculty-items');
carousel.outerWidth(profilePanelSize * profileCount);
facultyPanel.outerWidth(profilePanelSize);
carousel.css('transform', 'translateX(' + 0 + '%)');
});
}
$('.tile-layout').on('click', function() {
$('.faculty-items').each(function() {
$(this).addClass('tile-view');
$('.faculty-carousel .faculty-items').css('transform', 'translateX(' + 0 + '%)');
})
});
$('.slider-layout').on('click', function() {
$('.faculty-items').each(function() {
$(this).removeClass('tile-view');
})
})
$(document).ready(function() {
panelSizing();
touchCarousel()
})
$(window).on('resize', function(){
panelSizing();
touchCarousel()
})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; }
.faculty-items.tile-view {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important; }
.faculty-items li {
height: 100px;
display: inline-block;
position: relative; }
.faculty-items li > a {
position: absolute;
top: 0;
width: 100%;
height: 100%;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none; }
.faculty-items li:nth-child(odd) {
background-color: grey; }
.faculty-items li:nth-child(even), .faculty-items a:nth-child(even) {
background-color: aqua; }
.faculty-items {
overflow: hidden;
position: relative;
right: 0;
display: flex;
-webkit-transition: transform 0.3s linear; }
.faculty-carousel .controls {
display: block; }
/*# sourceMappingURL=style.css.map */<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<div class="slider-layout">
slider layout
</div>
<div class="tile-layout">
tile layout
</div>
<div class="faculty-carousel">
<ul class="faculty-items">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
<div class="controls">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="faculty-carousel">
<ul class="faculty-items">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
</ul>
<div class="controls">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>
<div class="faculty-carousel">
<ul class="faculty-items">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
<li><a href="#">Item 8</a></li>
<li><a href="#">Item 9</a></li>
<li><a href="#">Item 10</a></li>
</ul>
<div class="controls">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
</div>