import { $$, $ } from '@utils';
import Swiper from 'swiper';

export default () => {
  const sliderContainers = $$('.page-slider');
  const sliderLoader = $('.slider-loader');

  if (!sliderContainers.length) { return }

  const options = {
    loop: true,
    effect: 'fade',
    autoplay: {
      delay: 6000,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    on: {
      imagesReady: function() {
        sliderLoader.style.display = 'none';
      },
      init: () => {
        sliderLoader.style.display = 'none';
      },
    }
  };

  [...sliderContainers].forEach((container) => {
    const swiper = new Swiper(container, options);

    return swiper;
  });
};