if you are searching for Infinite Scrolling image Slider ? Then you are in right place. here we are going to show how to create Infinite Scrolling Slider using html and css. This cool Snippet Designed by Jake Albaugh.
Demo : Infinite Scrolling image Slider
The html
[code language=”html”]
<div class="slider">
<div class="slider-row"></div>
</div>
[/code]
CSS / SCSS
[code language=”css”]
$img-w: 5912px;
$img-h: 389px;
$shrink: 2;
$ratio: 1 / $shrink;
$speed: 50s;
.slider {
position: absolute;
width: 100%;
top: calc(50% – #{$img-h * $ratio / 2});
overflow: hidden;
.slider-row {
width: $img-w * $ratio;
height: $img-h * $ratio;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/ubiquity-summit-web-01.png);
background-size: $img-w * $ratio $img-h * $ratio;
animation: slide $speed linear infinite;
}
}
@keyframes slide {
from { background-position-x: 0; }
to { background-position-x: -$img-w * $ratio; }
}
[/code]
