Snippets

Simple CSS-Only Image Slider

June 25, 2017

animation image slider

Simple CSS-Only Image Slider
<div id="cssSlider"> <div id="sliderImages"> <img id="si_1" src="http://vizua.net/dummy.jpg"> <img id="si_2" src="http://vizua.net/dummy.jpg"> <img id="si_3" src="http://vizua.net/dummy.jpg"> <img id="si_4" src="http://vizua.net/dummy.jpg"> <img id="si_5" src="http://vizua.net/dummy.jpg"> <div style="clear:left;"></div> </div> </div> #cssSlider { width: 800px; height: 300px; overflow: hidden; border: 10px solid #666; } #sliderImages { width : 4000px; height: 300px; overflow: hidden; /* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */ animation: slide 16s infinite; -moz-animation: slide 16s infinite; -webkit-animation: slide 16s infinite; -o-animation: slide 16s infinite; } #sliderImages img { float: left; } @keyframes slide{ 0%{margin-left: 0px;} 17%{margin-left: 0px;} 20%{margin-left: -800px;} 37%{margin-left: -800px;} 40%{margin-left: -1600px;} 57%{margin-left: -1600px;} 60%{margin-left: -2400px;} 77%{margin-left: -2400px;} 80%{margin-left: -3200px;} 97%{margin-left: -3200px;} 100%{margin-left: 0px;} } @-moz-keyframes slide{ 0%{margin-left: 0px;} 17%{margin-left: 0px;} 20%{margin-left: -800px;} 37%{margin-left: -800px;} 40%{margin-left: -1600px;} 57%{margin-left: -1600px;} 60%{margin-left: -2400px;} 77%{margin-left: -2400px;} 80%{margin-left: -3200px;} 100%{margin-left: -3200px;} } @-webkit-keyframes slide{ 0%{margin-left: 0px;} 17%{margin-left: 0px;} 20%{margin-left: -800px;} 37%{margin-left: -800px;} 40%{margin-left: -1600px;} 57%{margin-left: -1600px;} 60%{margin-left: -2400px;} 77%{margin-left: -2400px;} 80%{margin-left: -3200px;} 100%{margin-left: -3200px;} } @-o-keyframes slide{ 0%{margin-left: 0px;} 17%{margin-left: 0px;} 20%{margin-left: -800px;} 37%{margin-left: -800px;} 40%{margin-left: -1600px;} 57%{margin-left: -1600px;} 60%{margin-left: -2400px;} 77%{margin-left: -2400px;} 80%{margin-left: -3200px;} 100%{margin-left: -3200px;} }

Related Content

Easy Way to Fix Anchor Links Scrolling Too Far

Stories

Easy Way to Fix Anchor Links Scrolling Too Far

Fixed navbar is a very popular way of displaying navigation when a page is scrolled, but you could run into a small detail that needs to be addressed.

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

Stories

How to Avoid Page Flickering When Scrollbars are Dynamically Shown or Hidden?

There are certain cases when you want to dynamically manipulate the page height which will result in flickering.

Changing the Mouse Cursor in CSS With the cursor Property

Stories

Changing the Mouse Cursor in CSS With the cursor Property

Using CSS to change the cursor on your website is a great way to add a little bit of personality to your site.