1
Hello! In my code the console displays me the following error: Uncaught Typeerror: d.addeventlistener is not a Function, I use Jquery. I already changed the addeventlistener for on, does not return me error, but the code does not work.
Just follow my lead:
function clickOnIndices(carrosselPai) {
var carouselIndice = carrosselPai.find('.indice');
var carousel = carrosselPai.find('.carousel');
carouselIndice.click(function (e) {
e.preventDefault();
var $this = $(this);
var indice = $this.data('indice');
if( ! $this.hasClass('active') ) {
carouselIndice.removeClass('active');
$this.addClass('active')
}
if( indice === 0 ) {
carousel.css('left', 0);
} else {
carousel.css('left', '-' + indice + '00%');
}
});
carouselIndice.eq(0).click();
// Touch Events
carrosselPai.addEventListener("touchstart", handleStart, false);
carrosselPai.addEventListener("touchmove", handleMove, false);
carrosselPai.addEventListener("touchcancel", handleCancel, false);
carrosselPai.addEventListener("touchend", handleEnd, false);
var posIniX = 0;
var posFimX = 0;
var posIniY = 0;
var posFimY = 0;
var changePage = false;
function handleStart(evt) {
posIniX = evt.touches[0].pageX;
posIniY = evt.touches[0].pageY;
changePage = false;
console.log(evt);
}
function handleMove(evt) {
posFimX = evt.touches[0].pageX;
posFimY = evt.touches[0].pageY;
changePage = true;
}
function handleEnd() {
var scrollActive = carrosselPai.find('.indice.active');
if( changePage) {
var difX = (posIniX - posFimX);
if( difX > 50 ) {
// Move para direita
scrollActive.next('.indice').click();
changePage = false;
} else if( difX < -50 ) {
// Move para esquerda
scrollActive.prev('.indice').click();
changePage = false;
} else {
scrollActive.find('.scroll').click();
return false;
}
}
changePage = false;
}
function handleCancel() {
changePage = false;
}
}
function commentsCarousel (carrosselPai, qtdeToShow) {
if(carrosselPai.length) {
var carousel = carrosselPai.find('.carousel');
var tamUtil = carrosselPai.width();
qtdeToShow = qtdeToShow || 3;
var qtdeItems = carousel.find('.item').length;
// Verifica se a divisão ficará correta
for(; (qtdeItems % qtdeToShow) !== 0;){
qtdeItems++;
}
var tamTotalPai = (qtdeItems * tamUtil) / qtdeToShow;
var percentualTotal = (tamTotalPai * 100) / tamUtil;
var tamItem = tamTotalPai / qtdeItems;
var percentualUni = (tamItem * 100) / tamTotalPai;
carousel.css('width', percentualTotal + '%');
carousel.find('.item').css('width', percentualUni + '%');
// Coloca os indices
for (var i = 0; i < (percentualTotal / 100); i++) {
carrosselPai.append('<a class="indice" href="#" data-indice="'+ i +'"></a>');
}
clickOnIndices(carrosselPai);
}
}
commentsCarousel($('#carousel'), 1);
When you call the function
clickOnIndices
?– Woss
Hello @Andersoncarloswoss, I updated my code for a full view. I hope to have improved :)
– Kamile Pimenta