Skip to content

Instantly share code, notes, and snippets.

@luisgagocasas
Last active August 29, 2015 14:23
Show Gist options
  • Save luisgagocasas/9598cefe9b5aabf17375 to your computer and use it in GitHub Desktop.
Save luisgagocasas/9598cefe9b5aabf17375 to your computer and use it in GitHub Desktop.
Responsive CSS Image Slider - Jade, Stylus
#slider
figure
img(src="http://demosthenes.info/assets/images/austin-fireworks.jpg")
img(src="http://demosthenes.info/assets/images/taj-mahal.jpg")
img(src="http://demosthenes.info/assets/images/ibiza.jpg")
img(src="http://demosthenes.info/assets/images/ankor-wat.jpg")
img(src="http://demosthenes.info/assets/images/austin-fireworks.jpg")
Responsive CSS Image Slider - Jade, Stylus
------------------------------------------
Preprocessor: Jade Stylus
https://luisgagocasas.com/
A [Pen](http://codepen.io/luisgagocasas/pen/eNyvoz)
body
margin 0
@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%
#slider
overflow: hidden
figure
position: relative
width: 500%
margin: 0
left: 0
text-align: left
font-size: 0
animation: 30s slidy infinite
img
width: 20%
float: left
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment