8
का उपयोग कर hammer.js स्पर्श ईवेंट को बंद करना मैंने अपनी वेबसाइट बनाने के लिए स्पर्श ईवेंट के साथ अपने कैरोसेल स्लाइडर का निर्माण करना अभी समाप्त कर दिया है। वर्तमान में यह पता लगाने की कोशिश कर रहा है कि मैं क्लिक ईवेंट पर उपयोग करके टच इवेंट (hammer) अक्षम कैसे कर सकता हूं। यहाँ सक्षम हिंडोला, जबकि कक्षा .tile-layout हिंडोला को निष्क्रिय कोड है कि मैंऑनक्लिक ईवेंट
वर्ग .slider-layout पर काम कर रहा है और एक कार्ड दृश्य लेआउट में लेआउट बदल देती है
अद्यतन # 1
मैंने कक्षा को हटाने की कोशिश की जो hammer.js को बांधता है लेकिन काम नहीं करता है।
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>