Не работает слайдер при открытии файла с телефона

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css'>
<style>                                       .swiper-container {
   min-width: 350PX;
   max-width: 570px;
   border-radius: 10px;
   padding: 0;
   }
   @media screen and (max-width: 610px) {
   .swiper-container {
   max-width: 500px;
   border-radius: 7px;
   }
   }
   @media screen and (max-width: 530px) {
   .swiper-container {
   max-width: 450px;
   border-radius: 7px;
   }
   }
   @media screen and (max-width: 480px) {
   .swiper-container {
   max-width: 400px;
   border-radius: 7px;
   }
   }
   @media screen and (max-width: 430px) {
   .swiper-container {
   max-width: 310px;
   border-radius: 2px;
   }
   }
   .swiper-slide {
   background-size: cover;
   background-position: 50%;
   min-height: 20vh;
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
   align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   }
   .swiper-pagination-bullet {
   background-color: transparent;
   border: 2px solid #fff;
   border-radius: 50%;
   width: 12px;
   height: 12px;
   opacity: 1;
   }
   .swiper-pagination-bullet-active {
   background-color: #fff;
   }
   .swiper-button-container {
   background-color: rgba(0, 0, 0, 0.25);
   }
   .swiper-button-prev {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
   }
   .swiper-button-next {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
   }
</style>
<section>
   <div class="swiper-container ">
      <div class="swiper-wrapper">
         <div class="swiper-slide">
            <img src="https://www.elitesochi.com/3dtours/images/lissabon/write/29.jpg"
               style="vertical-align: top; width: 100%;"/>
         </div>
         <div class="swiper-slide"> 
            <img src="https://www.elitesochi.com/3dtours/images/lissabon/write/28.jpg"
               style="vertical-align: top; width: 100%;"/>
         </div>
         <div class="swiper-slide"> 
            <img src="https://www.elitesochi.com/3dtours/images/lissabon/write/27.jpg"
               style="vertical-align: top; width: 100%;"/>
         </div>
         <div class="swiper-slide"> 
            <img src="https://www.elitesochi.com/3dtours/images/lissabon/write/28.jpg"
               style="vertical-align: top; width: 100%;"/>
         </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
   </div>
</section>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.js'></script>
<script type="text/javascript">
   "use strict";
   var Swipes = new Swiper('.swiper-container', {
   loop: true,
   navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
   },
   pagination: {
   el: '.swiper-pagination',
   },
   });
</script>