PASO 1

 

 

Index.html

 

<html>

<head>

<title> slider </title>

<link rel="stylesheet" href="slider.css">

</ head>

<body>

<div class= "slider">

<ul>

<li><img src="img1.jpg"></li>

<li><img src="img2.jpg"></li>

<li><img src="img3.jpg"></li>

<li><img src="img4.jpg"></li>

</ul>

</div>

</body>

</html>

SEGUNDO PASO

 

ANIMACIÒN  CSS

 

Slider.css

 

.slider {
 width: 70%;
 margin: auto;  
 overflow: hidden;
}
.slider ul {
 display: flex;
 padding: 0;
 width: 400%;
 animation: cambio 20s infinite alternate linear;
 
}
.slider li {
 width: 100%;
 list-style: none;
}
.slider img {
 width: 100%;
}
@keyframes cambio {
 0% { margin-left: 0;}
 20% { margin-left: 0;}
 25% {margin-left: -100%;}
 45% {margin-left: -100%;}
 50% {margin-left: -200%;}
 70% {margin-left: -200%;}
 75% {margin-left: -300%;}
 100% {margin-left: -300%;}
 
}

Slider.html

 

 

<!DOCTYPE html>
<html lang="es">
    <head>
    <thml lang="es">
        <litle> <center> Slider automatico  </center></litle>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="animacion.css">
    </head>
    <body>
       
        <div class="slider">
            <ul>
                <li><img src="nombre.jpg" alt=""></li>
                <li><img src="nombre.jpg" alt=""></li>
                <li><img src="nombre.jpg" alt=""></li>
                <li><img src="nombre.jpg" alt=""></li>
            </ul>   
        </div>
    </body>
</html>

 

 

------------------------------------------------------------------------------------------------

SLIDE

//html

<link rel="stylesheet" href="slider.css">

<div class="slider">

    <ul>

        <li>

<img src="http://dominicushoeve.com/wp-content/uploads/ktz/latest-high-resolution-wallpaper-1920x1080-70558-pictures-high-resolution-wallpaper-30whtvl34j4r12m8b0c1sa.jpg" alt="">

</li>

        <li>

<img src="http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-Definition-700x300.jpg" alt="">

</li>

        <li>

<img src="http://welltechnically.com/wp-content/uploads/2013/08/android-wallpapers-700x300.jpg" alt="">

</li>

        <li>

<img src="http://welltechnically.com/wp-content/uploads/2013/09/android-widescreen-wallpaper-14165-hd-wallpapers-700x300.jpg" alt="">

</li>

    </ul>

</div>

 

//css

.slider{

width: 95%;

margin: auto;

overflow: hidden;

}

 

.slider ul {

display: flex;

padding: 0;

width: 400%;

 

animation: cambio 20s infinite alternate linear;

}

 

.slider li {

width: 100%;

list-style: none;

}

 

.slider img {

    width:1200px;

    height: 350px;

    

}

 

@keyframes cambio {

0% {margin-left: 0;}

20% {margin-left: 0;}

 

25% {margin-left: -200%;}

45% {margin-left: -200%;}

 

50% {margin-left: -200%;}

70% {margin-left: -200%;}

 

75% {margin-left: -300%;}

100% {margin-left: -300%;}

}