Question

我试图在我的网站上实现这个响应式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滑块，它的工作原理。

主要部分位于导航代码旁边，位于页脚之前。

谢谢。

Answer 1

Codepen默认使用prefixfree.min.js，并且在可见代码框中没有提到它。 CSS中使用的动画需要在您的浏览器中使用前缀。您有两个选择：

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS3 Slider无法在我的网站上运行

1 个答案: