Question

我试图实现这个响应式css图片滑块，但它似乎根本不适用于移动设备.. Demo review

当我访问手机上的Codepen页面时，它可以正常工作，但在我的网址上，由于某种原因它只挂在第一张图片上...（仅限移动设备，在桌面上正常工作）我已尝试过不同的浏览器不同的手机..

现在代码与codepen完全相同，没有任何标签冲突或类似的东西，而且相当简单。

是否还需要添加其他内容以使其适合移动设备？我无法想象，因为它只是CSS ..

所以，也许我需要另一双眼睛，但我只是没有得到可能影响它的东西？

所以这里是代码：

HTML

<div id="slider">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>

CSS

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

谢谢！

Answer 1

通常在这些情况下，罪魁祸首是视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

您是否在网页中添加了此内容？

响应式CSS图像无法在移动设备上运行

1 个答案: