旋转木马跳跃响应

Question

当网站在手机中显示时，以下Bootstrap Carousel会从图像跳转到图像而不是在桌面浏览器中滑动。 可能存在错误或某些因素导致媒体查询中的错误，但无法弄明白。

感谢。

P.S。：当我使用Chrome的响应式视图时，它运行正常。

这是网站http://www.plantaeditora.net/

代码

#pagewrap {
  margin-left: 0em;
  padding-top: 1em;
  padding-left: 5em;
  padding-right: 5em;
  padding-bottom: 3em;
  max-width: 1196px;
  margin: 0 auto;
}

body {
  background-color: #FFB797;
}

.carousel img {
  object-fit: contain;
  object-position: 175% 1%;
}

#carouselExampleSlidesOnly {
  padding-left: 2.7em;
  padding-right: 0em;
}

@media screen and (max-width: 480px) {
  #pagewrap {
    padding: 0em;
  }
  .left,
  .right {
    float: none;
    width: auto;
    padding: 2em;
  }
  .left_interior,
  .right_interior {
    float: none;
    width: auto;
    padding: 1em;
    padding-top: 1em;
  }
  #nav ul {
    text-align: center;
    list-style: none;
    color: white;
    max-width: 290px;
    text-decoration: none;
    font-size: 1em;
    font-family: "Signika-light", "arial";
    line-height: 30px;
    padding-left: 3.5em;
  }
  #nav ul li:hover {
    list-style-image: url('bullet.png');
    color: white;
    text-decoration: none;
    max-width: 290px;
    line-height: 30px;
    text-align: center;
    max-width: 290px;
  }
  #carouselExampleSlidesOnly {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
  .carousel-item {
    height: 240px;
    width: 350px;
  }
}

@media screen and (max-width: 320px) {
  .carousel-item {
    height: 200px;
    width: 280px;
  }
}

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3500">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="home/PE_H1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="home/PE_H2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="home/PE_H3.jpg" alt="Third slide">
    </div>
  </div>