CSS Boulder High Soccer Picture Slider

In this example below you will see how to do a CSS Boulder High Soccer Picture Slider with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 120hit, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 120hit ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Boulder High Soccer Picture Slider</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div id="slider">
      <figure>
      <img src="http://boulderhighsoccer.com/wp-content/uploads/2013/11/1394328_680441555309159_1043550731_n.jpg">
      <img src="http://44gvzb1ymseycnphg2arpye1.wpengine.netdna-cdn.com/wp-content/uploads/2015/10/012A7258-copy.jpg"/>
      <img src="http://chsaanow.com/wp-content/uploads/2014/09/20140904_HS_FAIRVIEWvsBOULDER_0108.jpg"/>
      </figure>
    </div>
  
  
  
  </body>










</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/css-boulder-high-soccer-picture-slider-dXJpkE */
@keyframes slider{
  0% {
    left:0;
  }
  20%{
    left:0;
  }
  25%{
    left: -100%;
  }
  45%{
    left:-100%;
  }
  50%{
    left:-200;
    
  }
  70%{
    left:-200%;
  }
  75%{
    left:-300%;
  }
  95%{
    left: -400%;
  }
  100%{
    left: -400%;
  }
}

#slider{
  overflow: hidden;
  
}
#slider figure img {
  width: 20%;
  float: left;
 
}

#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s slider infinite;
}




Comments