<script>
  $(function () {

    arrowClick();
    initArch();
    if ($(window).width() < 768) {
      initUsers(4)
    } else {
      initUsers(7)
    }

    function arrowClick() {
      $('.icon-arrow').click(function () {
        $('html,body').animate({scrollTop: $("#introduction").offset().top - 100}, 400)
      });
    }

    function initArch() {
      new Swiper('.arch-swiper-container', {
        loop: true,
        effect: 'fade',
        fadeEffect: {
          crossFade: true,
        },
        autoplay: {
          delay: 3000,
        },
        pagination: {
          el: '.arch-swiper-pagination',
          dynamicBullets: true,
        },

        navigation: {
          nextEl: '.arch-swiper-button-next',
          prevEl: '.arch-swiper-button-prev',
        },

      });
    }

    function initUsers(num) {
      new Swiper('.user-swiper-container', {
        slidesPerView: num,
        slidesPerGroup: num,
        slidesPerColumn: 4,
        spaceBetween: 20,
        autoplay: {
          delay: 5000,
        },
        pagination: {
          el: '.user-swiper-pagination',
          dynamicBullets: true,
        },
        navigation: {
          nextEl: '.user-swiper-button-next',
          prevEl: '.user-swiper-button-prev',
        },
      })
    }
  })
</script>