console.clear();

        //  =========================  xxxxx  ==========================

        gsap.set(".centered", { autoAlpha: 1, xPercent: -50, yPercent: -50 });
        gsap.set("h1", { autoAlpha: 1, yPercent: -50 });
        gsap.set(" .slide", { autoAlpha: 1, xPercent: 0 });
        gsap.set(".go", { autoAlpha: 1, yPercent: -50 });

        var slides = $(".slide"),
            activeSlide = $(".slide.active"),
            next = $(".go-next"),
            prev = $(".go-prev"),
            moveSlideTL = gsap.timeline(),
            lines = $('h1');

        // Animaciones individuales para cada slider ======

        const allSlides = [].slice.call(slides);
        let animations = [];

        for (let [i] of allSlides.entries()) {
            animations[i] = gsap.timeline({});
        }

        animations[0] // Smart Training ======
            gsap.from('#slide01 .olivoSt',{autoAlpha: 0, duration: 3, y: -200, ease: 'expo.inOut'})
            gsap.from('#slide01 .selloSt',{autoAlpha: 0, duration: 5, y: 200, ease: 'expo.inOut'})
            gsap.from('#slide01 .jumping',{autoAlpha: 0, delay: 1.2, duration: 4, y: 300, ease: 'elastic.out(1, 0.3)'})
            gsap.from('#slide01 .anima1',{autoAlpha: 0, delay: 2, duration: 2, y: -30, stagger: 0.7})
            gsap.from('#slide01 .tituloSt',{autoAlpha: 0, delay: 2, duration: 3, x: 100, ease: 'expo.inOut'})

        animations[1] // Smart App ======
            gsap.from('#slide02 .checkSa',{autoAlpha: 0, delay: 3, duration: 4, y: 300, ease: 'elastic.out(1, 0.3)'})
            gsap.from('#slide02 .pantallasSa',{autoAlpha: 0, duration: 4, x: -100, ease: 'expo.inOut'})
            gsap.from('#slide02 .engranajesSa',{autoAlpha: 0, duration: 3, y: -200, ease: 'back.inOut(1.7)'})
            gsap.from('#slide02 .anima2',{autoAlpha: 0, delay: 2, duration: 2, y: -30, stagger: 0.7})
            gsap.from('#slide02 .tituloSa',{autoAlpha: 0, delay: 2, duration: 3, x: 100, ease: 'expo.inOut'})
            gsap.from('#slide02 .chicaSa',{autoAlpha: 0, duration: 1, x: 100, ease: 'slow(0.7, 0.7, false)'})

        animations[2]
            .from('#slide03 .lines', { y: 30, autoAlpha: 0, duration: 1 })
            .set('#slide03 span', { color: 'green' })
            .reverse();

        animations[3]
            .from('#slide04 .lines', { scale: 0.2, transformOrigin: 'center', duration: 2 })
            .reverse();

        animations[4]
            .from('#slide05 .lines', { scale: 0.2, transformOrigin: 'center', duration: 2 })
            .reverse();

        animations[5]
            .from('#slide06 .lines', { scale: 0.2, transformOrigin: 'center', duration: 2 })
            .reverse();

        // Fin animaciones ===========================

        // Rueda del ratón ==========================

        function onMouseWheel(event) {
            //Normalize event wheel delta
            var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

            if (delta < -1) {  //scrolling down -> next slide
                if (!moveSlideTL.isActive()) {
                    var slideFrom = $(".slide.active"),
                        sectionToIndex = slides.index(slideFrom);

                    if (sectionToIndex !== slides.length - 1) {
                        slideTo = slides.eq(sectionToIndex + 1);
                        moveToSlide(slideFrom, slideTo);
                    }
                }

            } else if (delta > 1) {  // -> prev
                if (!moveSlideTL.isActive()) {
                    if (!moveSlideTL.isActive()) {
                        var slideFrom = $(".slide.active"),
                            sectionToIndex = slides.index(slideFrom);

                        if (sectionToIndex != 0) {
                            slideTo = slides.eq(sectionToIndex - 1);
                            moveToSlide(slideFrom, slideTo);
                        }
                    }
                }
            }
            //event.preventDefault();
        }

        // ============================
        function dotClick() {

            var slideFrom = $(".slide.active"),
                sectionToIndex = $(this).index(),
                sectionToIndex = $(this).index(),
                slideTo = slides.eq(sectionToIndex);

            var indexFrom = slideFrom.index();

            console.log(slideFrom, 'from: ' + indexFrom, 'to: ' + sectionToIndex, 'slideTo: ' + slideTo);

            //if(slideFrom !== slideTo && !moveSlideTL.isActive()) {  // not working

            if (indexFrom !== sectionToIndex && !moveSlideTL.isActive()) {
                moveToSlide(slideFrom, slideTo);
            }

        }

        // =============================
        function nextClick() {
            if (!moveSlideTL.isActive()) {
                var slideFrom = $(".slide.active"),
                    sectionToIndex = slides.index(slideFrom);

                if (sectionToIndex !== slides.length - 1) {
                    slideTo = slides.eq(sectionToIndex + 1);
                    moveToSlide(slideFrom, slideTo);
                }
            }
        }

        function prevClick() {
            if (!moveSlideTL.isActive()) {
                var slideFrom = $(".slide.active"),
                    sectionToIndex = slides.index(slideFrom);

                if (sectionToIndex != 0) {
                    slideTo = slides.eq(sectionToIndex - 1);
                    moveToSlide(slideFrom, slideTo);
                }
            }
        }

        // ==============================
        function moveToSlide(slideFrom, slideTo) {

            gsap.set('.go', { autoAlpha: 0 }) // ????

            if (slides.index(slideFrom) < slides.index(slideTo)) { // vorwärts

                moveSlideTL = gsap.timeline({ onComplete: setActiveSlide, onCompleteParams: [slideTo, slideFrom] })
                    .to(slideTo, { xPercent: -100, duration: 0.5, className: "slide active" })
                    .to(slideFrom, { xPercent: -200, duration: 0.5, className: "slide" }, 0)
                    .set(slideFrom, { xPercent: 0 })

            } else {

                moveSlideTL = gsap.timeline({ onComplete: setActiveSlide, onCompleteParams: [slideTo, slideFrom] })
                    .set(slideTo, { xPercent: -200, className: "slide active" })
                    .to(slideTo, { xPercent: -100, duration: 0.5 })
                    .to(slideFrom, { xPercent: 0, duration: 0.5, className: "slide" }, 0)
            }

        }

        function setActiveSlide(active, last) {

            var currentSlideIndex = slides.index(active);
            var lastSlideIndex = slides.index(last);

            animations[currentSlideIndex].reversed(false);
            animations[lastSlideIndex].progress(0).reversed(true);

            gsap.to(".navDot.active", { opacity: 0.5, scale: 1 });
            $(".navDot.active").removeClass("active");
            $(".navDot").eq(currentSlideIndex).addClass("active");
            gsap.to(".navDot.active", { opacity: 1, scale: 1.3 });

            if (currentSlideIndex == 0) {
                gsap.set('.go-prev', { autoAlpha: 0 })
            } else {
                gsap.set('.go-prev', { autoAlpha: 1 })
            }
            if (currentSlideIndex == slides.length - 1) {
                gsap.set('.go-next', { autoAlpha: 0 })
            } else {
                gsap.set('.go-next', { autoAlpha: 1 })
            }

        }

        // ================================
        function init() {

            for (var i = 0; i < slides.length; i++) {
                var navDots = $('<div></div>').addClass("navDot").appendTo('nav');
                gsap.set(".navDot:first-child", { className: "navDot active", opacity: 1, scale: 1.3, transformOrigin: 'center' });
                navDots.on('click', dotClick);
            };

            if (slides[0]) {
                gsap.set('.go-prev', { autoAlpha: 0 })
            }

            next.on('click', nextClick);
            prev.on('click', prevClick);

            $(window).on("mousewheel DOMMouseScroll", onMouseWheel);
            //$(window).on("touchmove", onMouseWheel);

            gsap.set($(".slide:odd"), { backgroundColor: "#0f8c0d", color: "#333333" });
            gsap.set(".slide.active", { xPercent: -100 });
            animations[0].reversed(false);
        }

        init();