CODEWITHSUNDEEP
htmlcssslider
BigBugCreator
BigBugCreator

Reputation: 1059

CSS3 Slider does not work on my web

im triying to implement this responsive CSS slider on my web: 

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

I put all the code exactly as I saw in this example.

My code is this (from the principal section) in 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>

And in the CSS is this: 

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

As you can see I put exactly the code, even the same pictures, but it does not work. If I make a new html and css, just with the div slider in the body, its works.

Main section is next to a nav tag, and before a footer.

Thank you.

Upvotes: 1

Views: 139

Answers (1)

Nima Parsi
Nima Parsi

Reputation: 2110

Codepen is using prefixfree.min.js by default and it's not mentioned in the visible code boxes. The animations used in the CSS need prefixes to work in your browser. You have 2 options:

  1. Download prefixfree.min.js and add it to your html and it will automatically set CSS3 prefixes for the browser you are using.

  2. Add the prefixes for each browser:

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>

Upvotes: 2

Related Questions