cobuild-angular-stack/assets/raws/landing.js

Base stack angular sass jade gulp

var number_carrousel = 1;
 $(function () {
    jQuery('.fade-slider').slick({
        dots: true,
        speed: 500,
        fade: true,
        cssEase: 'linear',
        prevArrow: null,
        nextArrow: null,
        asNavFor: '.slider-nav'
    });

    var imageArray = [
        {
            "number": 1,
            "url": "../img/iffel.jpg"
        },{
            "number": 2,
            "url": "../img/caminando.jpg"
        },{
            "number": 3,
            "url": "../img/maletas.jpg"
        },{
            "number": 4,
            "url": "../img/668538312.jpg"
        }
    ];

    $(document).ready(function()
    {
        setInterval(function() {
            var prev = number_carrousel;
            number_carrousel ++;
            var position = "center center";
            if(number_carrousel > 3) {
                number_carrousel = 1;
            }
            if(number_carrousel == 3) {
                //position = "top center";
            }
            var image = _.find(imageArray, function(model) {
                return model.number == number_carrousel;
            });
            $(".header-image").css({"background": "url("+image.url+") no-repeat","background-size": "cover",
            "background-position": position});
            $("#header-step"+prev).addClass("hidden");
            $("#header-step"+number_carrousel).removeClass("hidden");
            $(".circle").removeClass("active");
            $("#image-"+number_carrousel).addClass("active");
        }, 100000);
    });

    jQuery('.center-slider').slick({

        dots: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
        prevArrow: null,
        nextArrow: null,
        customPaging: function(slider, i) {
          // this example would render "tabs" with titles
          var images = $('.carousel-dot[data-order="'+(i+1)+'"]');
          if(images.length){
            var image = images[0];
            var src = $(image).attr('src');
            return '<span class="dot"><img src="'+src+'"></span>';
          }
          return '';

        },
    });

    jQuery('.brands-slider').slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
        autoplay: true,
        autoplaySpeed: 6000,
        fade: true,
        cssEase: 'linear',
        arrows:true,
        nextArrow: '<button class="arrow-next slick-arrow"><i class="fa fa-chevron-right"></i></button>',
        prevArrow: '<button class="arrow-prev  slick-arrow"><i class="fa fa-chevron-left"></i></button>',
    });

    jQuery('.brands-slider-big').on('afterChange', function(event, slick, currentSlide){
      jQuery('.brands-slider-big').attr("style", "visibility: visible")
    });

    jQuery('.brands-slider-big').slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
        autoplay: true,
        autoplaySpeed: 6000,
        cssEase: 'linear',
        arrows:true,
        nextArrow: '<button class="arrow-next slick-arrow"><i class="fa fa-chevron-right"></i></button>',
        prevArrow: '<button class="arrow-prev  slick-arrow"><i class="fa fa-chevron-left"></i></button>',
    });

    jQuery('.bars').click(function () {
        jQuery('.bars .fa').toggleClass('fa-bars').toggleClass('fa-close');

        if (jQuery('.mobile-menu').hasClass('slideInLeft')) {
            jQuery('.mobile-menu').removeClass('slideInLeft');
            jQuery('.mobile-menu').addClass('slideOutLeft');

        } else {
            jQuery('.mobile-menu').removeClass('slideOutLeft');
            jQuery('.mobile-menu').addClass('slideInLeft');
        }
    });

    $('a[role="section-scroll"]').on('click', function(event) {
        event.preventDefault();
        var element = $(event.currentTarget).attr('href')
        console.log("element id:",element)
        $("html, body").animate({
          scrollTop: $(element).offset().top
        }, "slow");
        return false;
    });

    $(".next-header-image").on('click', function(event) {
        var prev = number_carrousel;
        number_carrousel ++;
        var position = "center center";
        if(number_carrousel > 3) {
            $("#onboard-btn").click();
            number_carrousel = 1;

        }
        if(number_carrousel == 3) {
            //position = "top center";
        }
            var image = _.find(imageArray, function(model) {
                return model.number == number_carrousel;
            });
            $(".header-image").css({"background": "url("+image.url+") no-repeat","background-size": "cover",
            "background-position": position})
            $("#header-step"+prev).addClass("hidden");
            $("#header-step"+number_carrousel).removeClass("hidden");
            $(".circle").removeClass("active");
            $("#image-"+number_carrousel).addClass("active");
    })

    $(".prev-header-image").on('click', function(event) {
            var prev = number_carrousel;
            number_carrousel --;
            var position = "center center";
            if(number_carrousel < 1) {
                number_carrousel = 3;
            }
            if(number_carrousel == 3) {
                //position = "top center";
            }
            var image = _.find(imageArray, function(model) {
                return model.number == number_carrousel;
            });
            $(".header-image").css({"background": "url("+image.url+") no-repeat","background-size": "cover",
            "background-position": position})
            $("#header-step"+prev).addClass("hidden");
            $("#header-step"+number_carrousel).removeClass("hidden");
            $(".circle").removeClass("active");
            $("#image-"+number_carrousel).addClass("active");
    })

    $(".circle-next").on('click', function(event) {
            var prev = number_carrousel;
            var target = $(event.currentTarget);
            if(target.hasClass("active")) return false;
            number_carrousel = parseInt(target.data("number"))
            var position = "center center";
            if(number_carrousel < 1) {
                number_carrousel = 3;
            }
            if(number_carrousel == 3) {
                //position = "top center";
            }
            var image = _.find(imageArray, function(model) {
                return model.number == number_carrousel;
            });
            $(".header-image").css({"background": "url("+image.url+") no-repeat","background-size": "cover",
            "background-position": position})
            $("#header-step"+prev).addClass("hidden");
            $("#header-step"+number_carrousel).removeClass("hidden");
            $(".circle").removeClass("active");
            $("#image-"+number_carrousel).addClass("active");
    })
});