反应灵敏的图像或在图中滑动

Question

我的投资组合页面中的一个图形内有一张幻灯片。我希望在移动设备中图像具有响应性，我希望始终能够观察到幻灯片宽度的100％。现在，在我的笔记本中，滑块正常，但在移动设备上，我只能看到幻灯片的任何图片。

.portfolio-single article figure iframe {
  width: 100%;
  height: 500px; 
}
.portfolio-single article figure {
  float: left;
  width: 100%;
  height: 500px;
  overflow: hidden; 
  position: relative; 
}
.portfolio-single article figure .slides {
  list-style: none;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
.portfolio-single article figure .slides li {
  float: left;
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

<article>
                    <figure>
                        <ul class="slides">
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191020_215606-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191020_212610-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/PSX_20191010_183102-1140x500.jpg');"></li>
<li style="background-image: url('https://terraepaglia.it/tep/wp-content/uploads/2019/10/IMG_20191022_151657-1140x500.jpg');"></li>
</ul>
                    </figure>