.slider{ width:90%; margin:auto; overflow:hidden; //*border-radius:5px;*// } .slider ul{ display:flex; padding:0; width:800%; animation: cambio 120s infinite alternate linear; animation-timing-function:ease; } .slider li{ width:100%; list-style:none; } .slider a{ width:120%; list-style:none; padding:2; } .slider img{ width:85%; border-radius: 7px; padding:0; } @keyframes cambio { 0% {margin-left: 0;} 10% {margin-left: 0;} 15% {margin-left: -50%;} 29% {margin-left: -50%;} 30% {margin-left: -100%;} 40% {margin-left: -100%;} 45% {margin-left: -200%;} 55% {margin-left: -200%;} 60% {margin-left: -300%;} 70% {margin-left: -300%;} 75% {margin-left: -400%;} 85% {margin-left: -400%;} 90% {margin-left: -500%;} 100% {margin-left: -500%;} } //* comienza slider 2 *// .slider2{ width:80%; margin:auto; overflow:hidden; //*border-radius:5px;*// } .slider2 ul{ display:flex; padding:0; width:500%; animation: cambio2 45s infinite alternate linear; animation-timing-function:ease; } .slider2 li{ width:400%; list-style:none; } .slider2 a{ width:500%; list-style:none; padding:4; } .slider2 img{ width:95%; border-radius:15px; padding:5; } @keyframes cambio2 { 0% {margin-left: 0;} 15% {margin-left: 0;} 30% {margin-left: -100%;} 35% {margin-left: -100%;} 40% {margin-left: -200%;} 70% {margin-left: -200%;} /* 75% {margin-left: -200%;} 100% {margin-left: -200%;} */ 75% {margin-left: -300%;} 90% {margin-left: -300%;} 95% {margin-left: -400%;} 100% {margin-left: -400%;} /* 90% {margin-left: -500%;} 100% {margin-left: -500%;}*/ } //* comienza slider 3 *// .slider3{ width:60%; margin:auto; overflow:hidden; //*border-radius:5px; pantalla gral*// } .slider3 ul{ display:flex; padding:0; width:300%; animation: cambio3 20s infinite alternate linear; animation-timing-function:ease; } .slider3 li{ width:700%; list-style:none; } .slider3 a{ width:500%; list-style:none; padding:4; } .slider3 img{ width:65%; border-radius:15px; padding:5; } @keyframes cambio3 { 0% {margin-left: 0;} 50% {margin-left: -100;} 100% {margin-left: -150%;} } //* comienza slider 6 *// .slider6{ width:90%; margin:auto; overflow:hidden; //*border-radius:5px;*// } .slider6 ul{ display:flex; padding:0; width:600%; animation: cambio6 35s infinite alternate linear; animation-timing-function:ease; } .slider6 li{ width:100%; list-style:none; } .slider6 a{ width:120%; list-style:none; padding:2; } .slider6 img{ width:95%; border-radius:15px; padding:0; } @keyframes cambio6 { 0% {margin-left: 0;} 15% {margin-left: 0;} 30% {margin-left: -100%;} 35% {margin-left: -100%;} 40% {margin-left: -200%;} 60% {margin-left: -200%;} /* 75% {margin-left: -200%;} 100% {margin-left: -200%;} */ 65% {margin-left: -300%;} 80% {margin-left: -300%;} 85% {margin-left: -400%;} 90% {margin-left: -400%;} 95% {margin-left: -500%;} 100% {margin-left: -500%;} } //* comienza slider 8 *// .slider8{ width:90%; margin:auto; overflow:hidden; //*border-radius:5px;*// } .slider8 ul{ display:flex; padding:0; width:600%; animation: cambio8 35s infinite alternate linear; animation-timing-function:ease; } /* .slider8 li{ width:600%; list-style:none; } */ .slider8 a{ width:600%; list-style:none; padding:4; } .slider8 img{ width:85%; border-radius:15px; padding:5; } @keyframes cambio8 { 0% {margin-left: 0;} 15% {margin-left: 0;} 30% {margin-left: -50%;} 35% {margin-left: -50%;} 40% {margin-left: -150%;} 45% {margin-left: -150%;} /* 75% {margin-left: -200%;} 100% {margin-left: -200%;} */ 50% {margin-left: -250%;} 55% {margin-left: -250%;} 60% {margin-left: -400%;} 65% {margin-left: -400%;} 70% {margin-left: -500%;} 75% {margin-left: -500%;} 80% {margin-left: -600%;} 85% {margin-left: -600%;} 90% {margin-left: -700%;} 100% {margin-left: -700%;} } //* comienza slider x *// .sliderx{ width:80%; margin:auto; overflow:hidden; //*border-radius:5px;*// } .sliderx ul{ display:flex; padding:0; width:100%; animation: cambio 35s infinite alternate linear; animation-timing-function:ease; } .sliderx li{ width:100%; list-style:none; } .sliderx a{ width:90%; list-style:none; padding:24; } .sliderx img{ width:400%; border-radius:35px; padding:15; } @keyframes cambiox { 0% {margin-left: 0;} 15% {margin-left: 0;} 30% {margin-left: -100%;} 35% {margin-left: -100%;} 40% {margin-left: -200%;} 70% {margin-left: -200%;} 75% {margin-left: -300%;} 90% {margin-left: -300%;} 95% {margin-left: -400%;} 100% {margin-left: -400%;} }