Como visualizar un slider CSS3 en todos los navegadores
Llevo dos días rompiéndome la cabeza con ese problema y no puedo solucionarlo, espero que podáis ayudarme:
Tengo un slider hecho en css3 muy simple. (solo son 4 imágenes que van pasando).
Me funciona perfectamente en Safari y en Chrome, pero en Firefox y en Opera no se ve (solamente se ven los bordes y la sombra del div, pero no las imágenes del fondo). Eso es lo que tengo:
HTML:
Muchas gracias por adelantado.
Tengo un slider hecho en css3 muy simple. (solo son 4 imágenes que van pasando).
Me funciona perfectamente en Safari y en Chrome, pero en Firefox y en Opera no se ve (solamente se ven los bordes y la sombra del div, pero no las imágenes del fondo). Eso es lo que tengo:
HTML:
<div id="contenidor"></div>CSS3:
#contenidor { width: 650px; height: 320px; margin-top: 60px; border: 3px solid #F9F9F9; box-shadow: 0 3px 3px #c9c9c9; animation: animacio 20s infinite; -moz-animation: animacio 20s infinite; -webkit-animation: animacio 20s infinite; } @keyframes animacio { 0% {background-image:url(../img/slider/traduccion.jpg)} 23% {background-image:url(../img/slider/traduccion.jpg)} 25% {background-image:url(../img/slider/localizacion.jpg)} 48% {background-image:url(../img/slider/localizacion.jpg)} 50% {background-image:url(../img/slider/interpretacion.jpg)} 73% {background-image:url(../img/slider/interpretacion.jpg)} 75% {background-image:url(../img/slider/editorial.jpg)} 98% {background-image:url(../img/slider/editorial.jpg)} 100% {background-image:url(../img/slider/traduccion.jpg)} } /* Mozilla */ @-moz-keyframes animacio { 0% {background-image: url(../img/slider/traduccion.jpg)} 23% {background-image:url(../img/slider/traduccion.jpg)} 25% {background-image:url(../img/slider/localizacion.jpg)} 48% {background-image:url(../img/slider/localizacion.jpg)} 50% {background-image:url(../img/slider/interpretacion.jpg)} 73% {background-image:url(../img/slider/interpretacion.jpg)} 75% {background-image:url(../img/slider/editorial.jpg)} 98% {background-image:url(../img/slider/editorial.jpg)} 100% {background-image:url(../img/slider/traduccion.jpg)} } /* Safari i Chrome */ @-webkit-keyframes animacio { 0% {background-image:url(../img/slider/traduccion.jpg)} 23% {background-image:url(../img/slider/traduccion.jpg)} 25% {background-image:url(../img/slider/localizacion.jpg)} 48% {background-image:url(../img/slider/localizacion.jpg)} 50% {background-image:url(../img/slider/interpretacion.jpg)} 73% {background-image:url(../img/slider/interpretacion.jpg)} 75% {background-image:url(../img/slider/editorial.jpg)} 98% {background-image:url(../img/slider/editorial.jpg)} 100% {background-image:url(../img/slider/traduccion.jpg)} } /* Opera */ @-o-keyframes animacio { 0% {background-image:url(../img/slider/traduccion.jpg)} 23% {background-image:url(../img/slider/traduccion.jpg)} 25% {background-image:url(../img/slider/localizacion.jpg)} 48% {background-image:url(../img/slider/localizacion.jpg)} 50% {background-image:url(../img/slider/interpretacion.jpg)} 73% {background-image:url(../img/slider/interpretacion.jpg)} 75% {background-image:url(../img/slider/editorial.jpg)} 98% {background-image:url(../img/slider/editorial.jpg)} 100% {background-image:url(../img/slider/traduccion.jpg)} } /* IE */ @-ms-keyframes animacio { 0% {background-image:url(../img/slider/traduccion.jpg)} 23% {background-image:url(../img/slider/traduccion.jpg)} 25% {background-image:url(../img/slider/localizacion.jpg)} 48% {background-image:url(../img/slider/localizacion.jpg)} 50% {background-image:url(../img/slider/interpretacion.jpg)} 73% {background-image:url(../img/slider/interpretacion.jpg)} 75% {background-image:url(../img/slider/editorial.jpg)} 98% {background-image:url(../img/slider/editorial.jpg)} 100% {background-image:url(../img/slider/traduccion.jpg)} }No sé con qué más probar, ¿vosotros véis algún error en el código o se os ocurre alguna solución?
Muchas gracias por adelantado.
0
Puntos
Puntos
1058
Visitas
Visitas
2
Resp
Resp
Por Roger hace 130 meses
Principiante
Respuesta #1
pues yo ese slider lo pruebo y no me sale absolutamente nada solo un cuadro sin nada, subelo tal y como lo tienes a algun subdominio que veamos una demo funcionando por el código no te preucupes lo vemos en la demo
Respuesta #2
yo no te eh contestado por que nunca eh hecho los slider de esa manera,yo metreria las imagenes en el html en vez de en el css y utilizaria un poco de jquery para la animación pero bueno, esperemos a ver si alguien qu elo haga a tu manera te contesta saludos!!