this.container = this.element.find('.slider');
-
this.hammerSwipe.get('swipe').set({ enable: true });
this.initt();
};
JQPMISlide.prototype = {
initt: function () {
- this.initEvents();
+ this.initEvents();
},
- initEvents:function(){
- let $this=this;
- $(window).on('orientationchange',function () {
+ initEvents: function () {
+ let $this = this;
+ $(window).on('orientationchange', function () {
$this.resize();
setTimeout(function () {
$this.resize();
- },500);
+ }, 500);
});
- $(window).on('resize',function () {
+ $(window).on('resize', function () {
$this.resize();
});
this.resize();
this.initSwipeEvent();
this.enableArrows();
+ // this.automaticSlideshow();
+ this.indicator();
},
- resize:function() {
- let $this=this;
+ resize: function () {
+ let $this = this;
this.element.find('.img-slider').each(function () {
- let width = $this.element.find('.slide-img').eq($this.index).width(),
- height = $this.element.find('.slide-img').eq($this.index).height();
+ let width = $this.element.find('.slide-img').eq($this.index).width(),
+ height = $this.element.find('.slide-img').eq($this.index).height();
- let naturalHeight = $(this).prop('naturalHeight'),
- naturalWidth = $(this).prop('naturalWidth');
+ let naturalHeight = $(this).prop('naturalHeight'),
+ naturalWidth = $(this).prop('naturalWidth');
- let getAllImg = new Image();
- getAllImg.src = $(this).attr("src");
+ let getAllImg = new Image();
+ getAllImg.src = $(this).attr("src");
- let widthFactor = width / naturalWidth, // coef multiplicateur width
- heightFactor = height / naturalHeight ; // coef multiplicateur height
+ let widthFactor = width / naturalWidth, // coef multiplicateur width
+ heightFactor = height / naturalHeight; // coef multiplicateur height
- TweenMax.set($(this),{width:naturalWidth*Math.max(widthFactor, heightFactor), height:naturalHeight*Math.max(widthFactor, heightFactor)});
- });
+ TweenMax.set($(this), {
+ width: naturalWidth * Math.max(widthFactor, heightFactor),
+ height: naturalHeight * Math.max(widthFactor, heightFactor)
+ });
+ });
- $('.slide-img').each(function () {
- let width = $(this).width(), // --> container width (clip container)
- height = $(this).height(); // --> container height (clip container)
+ $('.slide-img').each(function () {
+ let width = $(this).width(), // --> container width (clip container)
+ height = $(this).height(); // --> container height (clip container)
- TweenMax.set($(this),{clip:$this.init + width +'px '+ height+ $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container
- });
- },
+ TweenMax.set($(this), {clip: $this.init + width + 'px ' + height + $this.final, ease: Power3.easeOut}); // on resize apply new width/height to clip container
+ });
+ },
- goToSlide: function(nextindex,direction){
+ goToSlide: function (nextindex, direction) {
this.width = this.element.find('.slide-img').eq(this.index).width();
this.height = this.element.find('.slide-img').eq(this.index).height();
this.nextIndicatorIndex = this.element.find('.slider-position').eq(nextindex);
this.nextContainerImg = this.element.find('.slide-img').eq(nextindex);
- this.hammerSwipe.get('swipe').set({ enable: false }); // disable swipe when animation is running
+ this.hammerSwipe.get('swipe').set({enable: false}); // disable swipe when animation is running
let $this = this;
this.finishAnimation = function () { // when animation is finished this function will be executed
- $this.hammerSwipe.get('swipe').set({ enable: true }); // swipe functionality is now reactivate
+ $this.hammerSwipe.get('swipe').set({enable: true}); // swipe functionality is now reactivate
$this.currentSlideIndex.removeClass('active').eq($this.index);
$this.enableArrows(); // when animation is finished we reactivate click event
- TweenMax.set($this.element.find('.slide-img'),{clip:$this.init + $this.width +'px '+ $this.height+ $this.final, ease: Power3.easeOut});
+ TweenMax.set($this.element.find('.slide-img'), {
+ clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
+ ease: Power3.easeOut
+ });
};
- if($(window).width() > 768){
- TweenMax.set($this.element.find('.slide-img'),{clip:$this.init + $this.width +'px '+ $this.height+ $this.final, ease: Power3.easeOut});
+ if ($(window).width() > 768) {
+ TweenMax.set($this.element.find('.slide-img'), {
+ clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
+ ease: Power3.easeOut
+ });
let tl = new TimelineMax({onComplete: $this.finishAnimation});
- tl.set($this.currentSlideIndex,{zIndex: 97});
- tl.set($this.nextTextContainer,{opacity:1,x:0});
- tl.to($this.currentTextContainer,0.5*$this.Delay,{x:-80*direction,opacity:0, ease: Power1.easeOut});
- tl.to($this.currentContainerImg,2*$this.Delay,{ clip: $this.init+ (direction)*-1*$this.imgWidth+'px,'+ $this.height+'px,'+ (direction)*-1*$this.imgWidth+'px', ease: Power2.easeInOut }, "-="+0.8*$this.Delay);
-
- tl.from($this.nextTextContainer,0.5*$this.Delay,{x:80*direction,opacity:0,ease: Power1.easeOut},'-='+1.2*$this.Delay);
-
- tl.from($this.nextContainerImg,1.5*$this.Delay,{x:150*direction,ease: Power2.easeInOut},'-='+2.3*$this.Delay); // initial delay value 1.5s
- tl.to($this.currentContainerImg,1.5*$this.Delay,{x:-250*direction,ease: Power2.easeInOut},"-="+1.9*$this.Delay); // initial delay value 1.5s
- tl.set($this.currentSlideIndex,{zIndex: 0});
- tl.set($this.currentContainerImg,{x:0});
+ tl.set($this.currentSlideIndex, {zIndex: 97});
+ tl.set($this.nextTextContainer, {opacity: 1, x: 0});
+ tl.to($this.currentTextContainer, 0.5 * $this.Delay, {
+ x: -80 * direction,
+ opacity: 0,
+ ease: Power1.easeOut
+ });
+ tl.to($this.currentContainerImg, 2 * $this.Delay, {
+ clip: $this.init + (direction) * -1 * $this.imgWidth + 'px,' + $this.height + 'px,' + (direction) * -1 * $this.imgWidth + 'px',
+ ease: Power2.easeInOut
+ }, "-=" + 0.8 * $this.Delay);
+
+ tl.from($this.nextTextContainer, 0.5 * $this.Delay, {
+ x: 80 * direction,
+ opacity: 0,
+ ease: Power1.easeOut
+ }, '-=' + 1.2 * $this.Delay);
+
+ tl.from($this.nextContainerImg, 1.5 * $this.Delay, {
+ x: 150 * direction,
+ ease: Power2.easeInOut
+ }, '-=' + 2.3 * $this.Delay); // initial delay value 1.5s
+ tl.to($this.currentContainerImg, 1.5 * $this.Delay, {
+ x: -250 * direction,
+ ease: Power2.easeInOut
+ }, "-=" + 1.9 * $this.Delay); // initial delay value 1.5s
+ tl.set($this.currentSlideIndex, {zIndex: 0});
+ tl.set($this.currentContainerImg, {x: 0});
}
- else{
+ else {
let tl2 = new TimelineMax({onComplete: $this.finishAnimation});
- $this.percent = 100*direction;
- $this.negativePercent = -100*direction;
-
- tl2.set($this.currentSlideIndex,{transform: 'translateX(0px)',opacity:1});
- tl2.set($this.nextSlideIndex,{transform: 'translateX(0px)',opacity:1});
- tl2.set($this.currentTextContainer,{transform: 'translateX(0px)',opacity:1});
- tl2.set($this.nextTextContainer,{transform: 'translateX(0px)',opacity:1});
-
- tl2.to($this.currentSlideIndex,0.7,{transform: 'translateX('+ ($this.percent+'%') +')',ease: Power1.easeOut});
- tl2.to($this.currentTextBlock,0.7,{opacity:0},'-=0.9');
- tl2.from($this.nextSlideIndex,0.7,{transform: 'translateX('+ ($this.negativePercent+'%') +')',ease: Power1.easeOut},"-=0.7");
- tl2.from($this.nextTextBlock,0.7,{opacity:0,x:-100*direction});
+ $this.percent = 100 * direction;
+ $this.negativePercent = -100 * direction;
+
+ tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)', opacity: 1});
+ tl2.set($this.nextSlideIndex, {transform: 'translateX(0px)', opacity: 1});
+ tl2.set($this.currentTextContainer, {transform: 'translateX(0px)', opacity: 1});
+ tl2.set($this.nextTextContainer, {transform: 'translateX(0px)', opacity: 1});
+
+ tl2.to($this.currentSlideIndex, 0.7, {
+ transform: 'translateX(' + ($this.percent + '%') + ')',
+ ease: Power1.easeOut
+ });
+ tl2.to($this.currentTextBlock, 0.7, {opacity: 0}, '-=0.9');
+ tl2.from($this.nextSlideIndex, 0.7, {
+ transform: 'translateX(' + ($this.negativePercent + '%') + ')',
+ ease: Power1.easeOut
+ }, "-=0.7");
+ tl2.from($this.nextTextBlock, 0.7, {opacity: 0, x: -100 * direction});
// reset all block style
- tl2.set($this.currentTextBlock,{opacity:1});
- tl2.set($this.currentSlideIndex,{transform: 'translateX(0px)',opacity:1});
- tl2.set($this.nextSlideIndex,{transform: 'translateX(0px)',opacity:1});
- tl2.set($this.currentTextContainer,{transform: 'translateX(0px)',opacity:1});
- tl2.set($this.nextTextContainer,{transform: 'translateX(0px)',opacity:1});
+ tl2.set($this.currentTextBlock, {opacity: 1});
+ tl2.set($this.currentSlideIndex, {transform: 'translateX(0px)', opacity: 1});
+ tl2.set($this.nextSlideIndex, {transform: 'translateX(0px)', opacity: 1});
+ tl2.set($this.currentTextContainer, {transform: 'translateX(0px)', opacity: 1});
+ tl2.set($this.nextTextContainer, {transform: 'translateX(0px)', opacity: 1});
}
this.nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
this.nextSlideIndex.addClass('active').eq(nextindex);
this.disableArrows(); // disable click on arrows until animation finishes
- this.index=nextindex;
+ this.index = nextindex;
},
this.goToSlide(nextindex, direction);
},
+ indicator: function(){
+ let $this= this;
+ $('.slider-position').on('click',function () {
+ let direction = -1;
+ let pos = $(this).data('position');
+
+ if (pos<direction){
+ this.direction = -1;
+ }
+ else if(pos>direction){
+ this.direction = 1;
+ }
+ else if(pos=direction){
+ this.goToSlide(pos,direction).off();
+ }
+ console.log(pos,direction);
+
+ // DETERMINER la direction en fonction de la position
+ $this.goToSlide(pos,direction);
+ // console.log(direction);
+ });
+ },
+
+ // autoSlide: function () {
+ // let $this = this;
+ //
+ // let myVar = setInterval(function () {
+ // $this.nextSlide();
+ // }, 4000);
+ // },
+
+ // automaticSlideshow:function(){
+ // // this.autoSlide();
+ //
+ // let $this = this;
+ //
+ // let myVar = setInterval(function () {
+ // $this.nextSlide();
+ // }, 4000);
+ //
+ // $(".arrow").on('click',function () {
+ // // $this.autoSlide.off();
+ // // clearInterval(myVar);
+ // // alert('test');
+ // })
+ // },
+
initSwipeEvent: function (){
let $this = this;
this.hammerSwipe.on('swiperight', function() {
enableArrows: function() {
let $this = this;
+ this.element.find(".arrow.next").on('click',function () {
+ $this.nextSlide();
+ });
- // this.element.on('click','.arrow.next')
- // $('.arrow.next').on('click', function () {
- // $this.nextSlide();
- // });
-
- // this.element.on('click','.arrow.prev')
- // $('.arrow.prev').on('click',function () {
- // $this.prevSlide();
- // });
-
- this.element.find(".home-arrow-left").on('click',function () {
+ this.element.find(".arrow.prev").on('click',function () {
$this.prevSlide();
});
},
disableArrows: function() {
- $('.arrow.next').off();
- $('.arrow.prev').off();
+ this.element.find(".arrow.next").off();
+ this.element.find(".arrow.prev").off();
}
};
})(jQuery);
$(function () {
- $("#pmiSlider").PMISlide();
+ $(".slider-container").PMISlide();
});
\ No newline at end of file
projects / pmi.git / commitdiff