Slider CSS

Slider with CSS

by Emmanuel Garcia

HTML

<!-- Slider -->                    
  <div id="slider" style="width:100%; height:auto; margin:0;"><figure>
  <iframe style="overflow: hidden; border: none; margin: 0; padding: 0;" src="https://raintreeclubvallarta.com/wp-content/themes/the-box/resort/weather/forecast-resort-es.html" width="100%" height="auto" frameborder="0" scrolling="no" align="middle"></iframe>
  <img src="https://www.krh.org/data/callout_buttons/buttons/contact.polsonhealth.jpg" alt>
 <iframe style="overflow: hidden; border: none; margin: 0; padding: 0;" src="https://www.multideas.mx" width="100%" height="1400px" frameborder="0" scrolling="no" align="middle"></iframe>
  <img src="http://thecanopy.org.au/wp-content/uploads/2017/03/family-services-front.png" alt>
   <iframe style="overflow: hidden; border: none; margin: 0; padding: 0;" src="https://www.multideas.mx" width="100%" height="1400px" frameborder="0" scrolling="no" align="middle"></iframe></figure></div> <!-- Slider -->

CSS

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


div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure iframe { width: 20%; float: left; }
div#slider figure { 
  position:relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 15s slidy infinite ;
}