user profile image

More details on my blog


  1. Hi, love the slider and i would like to put it in my site, but i cant see it play, is stuck on the first img. any help?


  2. Hi Paolo: The most likely cause of not seeing any animation is that you're testing in Chrome or Safari and have not included vendor prefixes on the keyframe animation and/or when calling it. I hope this helps!

  3. Hey

    Your slider looks very nice. Though I can't get it working on my Magento site.

    Could you please have a look at http://www.melissima.pl?



  4. Looks fine on the latest versions of Chrome, Safari and Firefox on a Mac, Vaidas... was there a particular browser you were having an issue with?

  5. I got the same problem too, If you copy those css code, this will be a problem for each browser. In this case I use Google Chrome, this is my code, to make it worked.

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

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

    you just need to adjust the vendor prefix --->>

    For examples: @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } }

  6. after getting this to start working with the above code I now found that it seems to limit to 5 slides . has anyone else found this , and what is the solution?

  7. James, you'd need to adjust the math on the keyframes: you can read the original article to learn more about that. Alternatively, you might want to take a look at my CSSSlidy solution, such uses JavaScript to calculate the keyframes for you.

  8. HI. This is a wonderful slider and hasn't slowed down the loading of pages unlike many others. Is it possible though to add navigation buttons to the slider?

  9. Not without some JavaScript, Damian: I have seen a version that uses CSS and form elements, but that's too over-coded for my liking.

  10. thanx Dudle, greate job! but is not working with 4, 3 or 2 photos, only with five. :(

  11. Daniel, you'll need to adjust the keyframes in order to accommodate the different number of images; you may want to read the associated blog post to learn more. Alternatively, you might use my CSSslidy script, which automates the keyframing process.

  12. Hi how di I add Words to it. I tried and it did not work

  13. Hi Charles: I'd recommend trying the version with captions.

  14. hey thanks this is clean code, concerning trying with captions i used caption.js on top of this

  15. Excellent job! Really clean, nice coded and pure CSS. =D

  16. Nice one. I just took it for a spin and i don't know what to change because i used 5 images but the last image changes suddenly to the first image within very few seconds as compared to the other images.

    Any advice on this!?

  17. Parvical, if you don't want to do the math, I'd suggest using my CSSSlidy script, which will auto-calculate the keyframes and CSS for you.

  18. Hi The Slider is very cool, I'm having an problem with

    saying the "method Not Allow" is there any way for me to download this and link to my server?
  19. The base href link?

  20. Can I download that link? I need to post that on my own server in order for it to work

  21. Had the same issue as Parzival with this code. Even though it works with 5 images here I couldn't get it to work on my site. It would get to the 5th image and jump cut immediately to the beginning of the animation. After spending far to long tweaking the code, I just decided to replace the 5th image with the same image I have set at the beginning of the slideshow so that you wouldn't see the jump cut at all. Just a cheap workaround for anyone else having this issue.

  22. I forked it to "do the math" for you i.e. support a variable number of slides (but you still need to add some html too) if anyone is still curious... @hidalgutzu @Cader @kenjoe41 https://codepen.io/zaus/pen/aXrRBr

  23. I want to be able to add buttons so that you can manually go back and forth as well. Can someone help with this?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.