한 페이지에 여러 개의 부트 스트랩 캐 러셀이 있으며 스 와이프 작업을하고 싶습니다. 이를 위해 hammer.js. hammer.js하나의 요소 에 바인딩하는 것은 문제가되지 않습니다. 예를 들면 다음과 같습니다.
var swipeElement = document.getElementById('carousel');
if (typeof(swipeElement) != 'undefined' && swipeElement != null) {
var hammertime = new Hammer(swipeElement, {
recognizers: [
[Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
],
cssProps: {
userSelect: "", contentZooming: ""
}
});
hammertime.on('swiperight', function () {
$('.left.carousel-control').click();
});
hammertime.on('swipeleft', function () {
$('.right.carousel-control').click();
});
}
작동합니다. 하지만 여러 개의 캐 러셀 위트 ID : carousel_1, carousel_2등이 있습니다. hammer.js각 ID에 대한 코드를 개별적으로 작성하지 않고 어떻게 초기화 할 수 있습니까? 감사.
수정 :
나는 이것을하려고했다 :
var swipeElements = document.getElementsByClassName('carousel-inner');
for(var i = 0; i < swipeElements.length; i++) {
if (typeof(swipeElements[i]) != 'undefined' && swipeElements[i] != null) {
var elementId = document.getElementById(swipeElements[i].id);
var hammertime = new Hammer(elementId, {
recognizers: [
[Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
],
cssProps: {
userSelect: "", contentZooming: ""
}
});
hammertime.on('swiperight', function () {
$(elementId).parent().children('.left.carousel-control').click();
});
hammertime.on('swipeleft', function () {
$(elementId).parent().children('.right.carousel-control').click();
});
}
}
하지만 여전히 도움이되지 않습니다. 내가 대체하는 경우 :
hammertime.on('swipeleft', function () {
$(elementId).parent().children('.right.carousel-control').click();
});
에 대한:
hammertime.on('swipeleft', function () {
$('.right.carousel-control').click();
});
페이지의 모든 캐 러셀을 트리거합니다. 오른쪽으로 스 와이프하면 다른 모든 캐 러셀도 오른쪽으로 스 와이프됩니다. 헷갈리네요 ...
EDIT : 어떤 이유에 대한 $(elementId)값을 가지고 carousel_6있지만, 루프에 배치되고, 그래서의 값을 가져야 carousel_0행carousel_6
각 래퍼에 대해 고유 한 클래스를 사용한 다음 jQuery를 사용하여 반복하십시오.
$('.carousel').each(function(i, el){
// el is the actual DOM element
// we save a jQuery wrapped version here in the closure so that
// it is available to callbacks.
var $el = $(el);
var hammertime = new Hammer(el, {
recognizers: [
[Hammer.Swipe, {direction: Hammer.DIRECTION_HORIZONTAL}]
],
cssProps: {
userSelect: "", contentZooming: ""
}
});
hammertime.on('swiperight', function () {
$el.find('.left.carousel-control').click();
});
hammertime.on('swipeleft', function () {
$el.find('.right.carousel-control').click();
});
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다