CSS3 Slider在我的网站上不起作用

Leonardo Cavani 发表于 Dev

莱昂纳多·卡瓦尼

我正在尝试在我的网络上实现此自适应CSS滑块：

http://codepen.io/dudleystorey/pen/ehKpi

我完全按照本示例中的说明放置了所有代码。

我的代码是HTML中的这段代码（来自主体部分）：

      <section class="main-section">
      <div id="slider">
<figure>
Here are the 5 pictures but I cant put them becaouse I have less than 10 points of reputation. However, are the same links of codepen.
</figure>
</div>
  </section>

在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; 
}

如您所见，我输入了完全相同的代码，即使是相同的图片，也无法正常工作。如果我制作一个新的html和css，只需将div滑块放在主体中，它就会起作用。

主要部分在导航标签旁边，在页脚之前。

谢谢你。

尼玛

默认情况下，Codepen使用的是prefixfree.min.js，可见代码框中未提及。CSS中使用的动画需要前缀才能在浏览器中工作。您有2个选择：

下载prefixfree.min.js并将其添加到您的html中，它将为您使用的浏览器自动设置CSS3前缀。
为每个浏览器添加前缀：

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;
  
    -webkit-animation: 30s slidy infinite;
    -moz-animation: 30s slidy infinite;
    -o-animation: 30s slidy infinite;
    animation: 30s slidy infinite;
}
@-webkit-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%;}
}
@-moz-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%;}
}
@-o-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%;}
}
@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%;}
}

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。