Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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:
<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
1057
Visitas
2
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
0
Puntos
Por zeuskx hace 130 meses
Administrador Sitio web
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!!

0
Puntos
Por zeuskx hace 130 meses
Administrador Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate