--- /dev/null
+import TweenMax from "gsap/TweenMax";
+
+(function ($) {
+ function JQPMISlide(element) {
+ this.element = element;
+ this.pmiSlider = this.element.get(0);
+ this.hammerSwipe = new Hammer(this.pmiSlider);
+ this.index = 0;
+ this.slideLength = this.element.find(".slide").length;
+
+ this.prevBtn = this.element.find(".home-arrow-left");
+ this.nextBtn = this.element.find(".home-arrow-right");
+ this.Delay = 1;
+ this.getImg = new Image();
+ this.getImg.src = this.element.find('.img-slider').attr("src");
+
+ this.img = this.element.find('.img-slider');
+ this.imgWidth = this.getImg.naturalWidth;
+
+ this.width = this.element.find('.slide-img').width(); // --> clip container width
+ this.height = this.element.find('.slide-img').height(); // --> clip container height
+ this.init = 'rect(0px ';
+ this.final = 'px 0px)';
+
+ this.container = this.element.find('.slider');
+ this.hammerSwipe.get('swipe').set({ enable: true });
+ this.initt();
+ };
+
+ JQPMISlide.prototype = {
+ initt: function () {
+ this.initEvents();
+ },
+
+ initEvents: function () {
+ let $this = this;
+ $(window).on('orientationchange', function () {
+ $this.resize();
+ setTimeout(function () {
+ $this.resize();
+ }, 500);
+ });
+ $(window).on('resize', function () {
+ $this.resize();
+ });
+
+ this.autoSlideDelay = 4; // automatic slideshow delay
+ this.slideInterval = window.setTimeout(function () {
+ $this.nextSlide();
+ }, this.autoSlideDelay*1000);
+
+ this.resize();
+ this.initSwipeEvent();
+ this.enableArrows();
+ this.automaticSlideshow();
+ this.indicator();
+ },
+
+ 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 naturalHeight = $(this).prop('naturalHeight'),
+ naturalWidth = $(this).prop('naturalWidth');
+
+ let getAllImg = new Image();
+ getAllImg.src = $(this).attr("src");
+
+ 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)
+ });
+ });
+
+ $('.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
+ });
+ },
+
+ 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.currentSlideIndex = this.element.find('.slide').eq(this.index);
+ this.nextSlideIndex = this.element.find('.slide').eq(nextindex);
+ this.currentTextContainer = this.element.find('.slide-txt').eq(this.index);
+ this.nextTextContainer = this.element.find('.slide-txt').eq(nextindex);
+ this.currentContainerImg = this.element.find('.slide-img').eq(this.index);
+ this.currentIndicatorIndex = this.element.find('.slider-position').eq(this.index);
+ this.currentTextBlock = this.element.find('.txt').eq(this.index);
+ this.nextTextBlock = this.element.find('.txt').eq(nextindex);
+ 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
+ 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.currentSlideIndex.removeClass('active').eq($this.index);
+
+ $this.slideInterval = setTimeout(function () {
+ $this.nextSlide();
+ }, $this.autoSlideDelay*1000);
+
+ $this.enableArrows(); // when animation is finished we reactivate click event
+ $this.automaticSlideshow();
+ TweenMax.set($this.element.find('.slide-img'), {
+ clip: $this.init + $this.width + 'px ' + $this.height + $this.final,
+ ease: Power3.easeOut
+ });
+
+ };
+
+ if ($(window).outerWidth() > 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});
+
+ }
+ 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});
+
+ // 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});
+
+ }
+ this.nextIndicatorIndex.addClass('active-indicator').eq(nextindex);
+ this.currentIndicatorIndex.removeClass('active-indicator').eq(this.index);
+
+ this.nextSlideIndex.addClass('active').eq(nextindex);
+ this.disableArrows(); // disable click on arrows until animation finishes
+ this.index = nextindex;
+
+ },
+
+ nextSlide: function () {
+ let direction = 1;
+
+ let nextindex = (this.index + direction + this.slideLength) % this.slideLength;
+ this.goToSlide(nextindex, direction);
+ },
+
+ prevSlide: function () {
+ let direction = -1;
+
+ let nextindex = (this.index + direction + this.slideLength) % this.slideLength;
+ this.goToSlide(nextindex, direction);
+ },
+
+ indicator: function(){
+ let $this= this;
+ $('.slider-position').on('click',function () {
+ let direction = 1;
+ let nextPosition= $(this).data('position');
+ let currentPosition = $this.index;
+
+ clearTimeout($this.slideInterval);
+
+ if (currentPosition< nextPosition){
+ direction = 1;
+ }
+ else if(currentPosition > nextPosition){
+ direction = -1;
+ }
+ else if(currentPosition == nextPosition){
+ return false;
+ }
+ $this.goToSlide(nextPosition,direction);
+ });
+ },
+
+ automaticSlideshow:function(){
+
+ let $this = this;
+ this.element.find(".arrow").on('click',function () {
+ // window.clearTimeout($this.slideInterval);
+ window.clearTimeout($this.slideInterval);
+
+ alert($this.slideInterval);
+ });
+ },
+
+ initSwipeEvent: function (){
+ let $this = this;
+ this.hammerSwipe.on('swiperight', function() {
+ $this.prevSlide();
+ clearTimeout($this.slideInterval);
+ });
+ this.hammerSwipe.on('swipeleft', function() {
+ $this.nextSlide();
+ clearTimeout($this.slideInterval);
+ });
+ },
+
+ enableArrows: function() {
+ let $this = this;
+ this.element.find(".arrow.next").on('click',function () {
+ $this.nextSlide();
+ });
+
+ this.element.find(".arrow.prev").on('click',function () {
+ $this.prevSlide();
+ });
+ },
+
+ disableArrows: function() {
+ this.element.find(".arrow.next").off();
+ this.element.find(".arrow.prev").off();
+ }
+ };
+
+ jQuery.fn.PMISlide = function () {
+ return this.each(function () {
+ var $this = $(this);
+ if ($(this).data('PMISlide') === undefined) {
+ $(this).data('PMISlide', new JQPMISlide($this));
+ }
+ })
+ };
+})(jQuery);
+
+$(function () {
+ $(".slider-container").PMISlide();
+});
projects / pmi.git / commitdiff