swiper 스크립트 충돌 문의드립니다~ 채택완료

현재 한 페이지에 각기 다른 swiper   2개를 사용중이고 

스크립트 역시 두개입니다. 

그런데 동시에 쓸려고 보니 같이 쓰면 

슬라이드기능과 한쪽 navigation 화살표는 

작동하지 않고 나머지 한쪽만 작동하는 현상이 발샐됩니다. 

작동하는 것은 위에 스크립트를 배치한 swiper만 작동됩니다.

이것저것 계속 시도중인데 2시간째 방법을 못찾아서

도움을 받을 수 있을까 여쭤봅니다. 

알려주시면 정말 감사하겠습니다! 

<script>
    var swiper = new Swiper(".mySwiper2", {
      slidesPerView: 4,
      spaceBetween: 10,
      freeMode: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

    });
  </script>

<script>
    const swiper = new Swiper('.swiper', {
      // Optional parameters
      direction: 'horizontal',
          effect : 'fade',
      loop: true,
      autoplay: {
        display:2000,
      },

      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
        type:'bullets',
        clickable:true,
      },

      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
</script>