prevBtn = $(".home-arrow-left"),
nextBtn = $(".home-arrow-right"),
Delay = 1;
-
let getImg = new Image();
getImg.src = $('.img-slider').attr("src");
$(window).on('resize',function () {
resize();
});
-
-// // RESIZE
+// RESIZE
function resize() {
- // if ($(window).width() > 769) {
- // listener.off();
- // }
-
$('.img-slider').each(function () {
let width = $('.slide-img').eq(index).width(),
height = $('.slide-img').eq(index).height();
}
function GotoSlide(nextindex, direction){
-
let width = $('.slide-img').eq(index).width(),
height = $('.slide-img').eq(index).height();
nextContainerImg = $('.slide-img').eq(nextindex);
let finishAnimation = function () {
- // alert("finished");
+
+ listener.on(); // --> activate swipe when animation is finished
currentSlideIndex.removeClass('active').eq(index);
enableArrows(); // when animation is finished we reactivate click event
TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
};
-
console.log(nextindex, direction);
TweenMax.set($('.slide-img'),{clip:init + width +'px '+ height+ final, ease: Power3.easeOut});
nextSlideIndex.addClass('active').eq(nextindex);
disableArrows(); // disable click on arrows until animation finishes
- index=nextindex;
+ listener.off(); // --> disable swipe when the animation is launched
- // console.log(tl.duration()); // timeline duration
+ index=nextindex;
}
function nextSlide() {
- let direction = 1;
+ let direction = 1;
- let nextindex = (index + direction + slideLength) % slideLength;
- GotoSlide(nextindex, direction);
+ let nextindex = (index + direction + slideLength) % slideLength;
+ GotoSlide(nextindex, direction);
}
function prevSlide(){
- let direction = -1;
+ let direction = -1;
- let nextindex = (index + direction + slideLength) % slideLength;
- GotoSlide(nextindex, direction);
+ let nextindex = (index + direction + slideLength) % slideLength;
+ GotoSlide(nextindex, direction);
}
function enableArrows() {
enableArrows();
-// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over
-// TODO : 2 --> Disable swipe when screen size >768px
+// TODO : 1 --> change the frequency of the swipe: we can swipe when the animation Timeline is over // update : works on desktop, bug with mobile devices
// TODO : BUG --> si on swipe (next, prev, next) on ne voit plus l'image
-function SwipeContent(){
+
+function swiper(){
container.addEventListener('swipe', function (e) {
let directions = e.detail.directions;
- let x = e.detail.x;
- let y = e.detail.y;
+ // listener.on();
if (directions.left) {
prevSlide();
}
}
});
}
-SwipeContent();
-// if ($(window).width() > 769) {
-// listener.off();
-// }
\ No newline at end of file
+swiper();