フリーランスの忘備録

const swiperOuter = document.getElementById('swiper-outer');            // .swiper-containerを囲む要素
const swiperSlides = document.getElementsByClassName('swiper-slide');   // .swiper-slide要素
const breakPoint = 800;   // ブレイクポイント
const slidesLimit = 4;    // ブレイクポイント以上でもswiperを動作させる .swiper-slide の個数
const initSwiperSlidesLength = swiperSlides.length;     // .swiper-slideの個数
let mySwiper ;
let mySwiperBool ;

window.addEventListener('load',()=>{
  if( initSwiperSlidesLength < slidesLimit ){
    swiperOuter.classList.add('noSwiper');
    if( breakPoint < window.innerWidth){
      mySwiperBool = false;
    }else{
      createSwiper();
      mySwiperBool = true;
    }
    resizeSwiper();
  }else{
    swiperOuter.classList.add('hasSwiper');
    const linktags = document.getElementsByTagName('link');
    for( let i in linktags ){
      if( linktags[i].dataset.style == 'swiper' ){
        linktags[i].setAttribute('media','all');
        break;
      }
    }
    createSwiper();
  }
},false);

const resizeSwiper = () =>{
  window.addEventListener('resize',()=>{
    if( breakPoint < window.innerWidth && mySwiperBool){
      mySwiper.destroy(false,true);
      mySwiperBool = false;
    }else if( breakPoint >= window.innerWidth && !(mySwiperBool)){
      createSwiper();
      mySwiperBool = true;
    }
  },false);
}

const createSwiper = () =>{
  mySwiper = new Swiper('.swiper-container', {
    speed: 1500,
    autoplay: {
      delay: 2000
    },
    slideToClickedSlide: true,
    spaceBetween: 10,
    slidesPerView: 'auto',
    loop: true,
    loopedSlides: initSwiperSlidesLength,
    centeredSlides: true
  });
}