- 27/12/2014 23:11
Hola buenas no sé si este seria él sitio correcto, para exponer un problema.
Vengo con un problema qué me es imposible solventar. Tengo una web echa con HTML5 y CS, estoy usando los script de esta página ([URL]http://www.slidesjs.com/[/URL]) para mostrar los botones y una serie de imágenes en mí slideshow. Pero es que no me aparecen los botoncillos que se supone que me tendrían que aparecer debajo para poder cambiar de imagen y la otra imagen me aparece justo debajo.
Este es el código en CS y HTML5. A ver si me podéis echar una mano porque ya ando desesperado.
.
.
.
.
Vengo con un problema qué me es imposible solventar. Tengo una web echa con HTML5 y CS, estoy usando los script de esta página ([URL]http://www.slidesjs.com/[/URL]) para mostrar los botones y una serie de imágenes en mí slideshow. Pero es que no me aparecen los botoncillos que se supone que me tendrían que aparecer debajo para poder cambiar de imagen y la otra imagen me aparece justo debajo.
Este es el código en CS y HTML5. A ver si me podéis echar una mano porque ya ando desesperado.
.
.
.
<.-- No cambiar nunca el ID ya que el script está hecho para qué busque primero ese ID .
.
.
CS.
-------.
/*--- SlideShow ---*/.
#slideshow{.
width:920px;.
Height:260px;.
Float:left;.
Background:#000;.
Border:solid 20px #f;.
Margin-bottom:10px;.
}.
#slideshow.pagination{.
Margin: 26px auto;.
width:100px;.
}.
#slideshow.pagination li{.
Float:left;.
Margin:0px 5px;.
List-style:none;.
}.
#slideshow img{.
width:920px;.
Height:260px;.
}.
#slideshow.pagination li a{.
Display:block;.
width:12px;.
Height:0px;.
Padding-top:12px;.
Background:#f;.
Float:left;.
Overflow:hidden;.
Border-radius:10px;.
-moz-border-radius:10px;.
-webkit-border-radius:10px;.
}.
#slideshow.pagination li, current a{.
Background:1798af;.
}.
-- IMÁGENES ADJUNTAS --
CS.
-------.
/*--- SlideShow ---*/.
#slideshow{.
width:920px;.
Height:260px;.
Float:left;.
Background:#000;.
Border:solid 20px #f;.
Margin-bottom:10px;.
}.
#slideshow.pagination{.
Margin: 26px auto;.
width:100px;.
}.
#slideshow.pagination li{.
Float:left;.
Margin:0px 5px;.
List-style:none;.
}.
#slideshow img{.
width:920px;.
Height:260px;.
}.
#slideshow.pagination li a{.
Display:block;.
width:12px;.
Height:0px;.
Padding-top:12px;.
Background:#f;.
Float:left;.
Overflow:hidden;.
Border-radius:10px;.
-moz-border-radius:10px;.
-webkit-border-radius:10px;.
}.
#slideshow.pagination li, current a{.
Background:1798af;.
}.
-- IMÁGENES ADJUNTAS --
- 03/01/2026 07:24
Veo varios problemas en tu código que están causando que los botones de navegación no aparezcan y que las imágenes se muestren una debajo de otra.
El primer error está en las llamadas a los archivos JavaScript. Tienes comas donde deberían haber puntos. Debes corregir las URLs. Además, la versión "latest" de jQuery puede causar conflictos con plugins antiguos. Te recomiendo usar una versión específica y compatible, como la 1.9.1, que suele funcionar bien con SlidesJS.
El segundo error es en la inicialización del script. Tienes puntos y comas incorrectos y el selector jQuery está mal escrito. Debes usar comillas alrededor del ID.
Aquí está el código corregido:
Reemplaza tus etiquetas script por estas:
script src="https://code.jquery.com/jquery-1.9.1.min.js"
script src="js/jquery.slides.js"
Luego, corrige tu script de inicialización. Debe quedar así:
script
$(function() {
$('#slideshow').slidesjs({
width: 920,
height: 260,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: true
}
});
});
/script
Fíjate en los cambios: el selector es $('#slideshow') entre comillas simples. Los parámetros dentro de slidesjs({}) se separan por comas, no por puntos. He añadido la sección pagination para activar explícitamente los botones (puntos) de navegación. El valor de effect debe ir entre comillas.
En tu HTML, la estructura está bien, pero asegúrate de que el contenedor principal tenga exactamente el ID slideshow. Tu primera imagen tiene una ruta imágenes/slideshow/.... Comprueba que la carpeta se llame exactamente así, sin tildes, ya que los servidores suelen ser sensibles a mayúsculas y minúsculas y las tildes pueden causar errores. Es mejor usar nombres de carpetas sin acentos, como imagenes.
En tu CSS, hay un error crítico en el selector para el estilo del botón activo. Donde dice #slideshow.pagination li, current a está mal escrito. Debe ser #slideshow .pagination li.current a (sin coma y con un punto antes de current). Este estilo es el que da color al botón de la página actual.
Un consejo final: SlidesJS es un plugin muy antiguo y puede tener problemas de compatibilidad. Si tras estas correcciones no funciona, te recomendaría buscar una solución más moderna y mantenida. Puedes crear un slideshow básico con funcionalidad similar usando solo CSS3 y un poco de JavaScript, o utilizar bibliotecas actuales como Swiper.js, que es mucho más robusta y fácil de implementar.
El primer error está en las llamadas a los archivos JavaScript. Tienes comas donde deberían haber puntos. Debes corregir las URLs. Además, la versión "latest" de jQuery puede causar conflictos con plugins antiguos. Te recomiendo usar una versión específica y compatible, como la 1.9.1, que suele funcionar bien con SlidesJS.
El segundo error es en la inicialización del script. Tienes puntos y comas incorrectos y el selector jQuery está mal escrito. Debes usar comillas alrededor del ID.
Aquí está el código corregido:
Reemplaza tus etiquetas script por estas:
script src="https://code.jquery.com/jquery-1.9.1.min.js"
script src="js/jquery.slides.js"
Luego, corrige tu script de inicialización. Debe quedar así:
script
$(function() {
$('#slideshow').slidesjs({
width: 920,
height: 260,
navigation: {
active: true,
effect: "slide"
},
pagination: {
active: true
}
});
});
/script
Fíjate en los cambios: el selector es $('#slideshow') entre comillas simples. Los parámetros dentro de slidesjs({}) se separan por comas, no por puntos. He añadido la sección pagination para activar explícitamente los botones (puntos) de navegación. El valor de effect debe ir entre comillas.
En tu HTML, la estructura está bien, pero asegúrate de que el contenedor principal tenga exactamente el ID slideshow. Tu primera imagen tiene una ruta imágenes/slideshow/.... Comprueba que la carpeta se llame exactamente así, sin tildes, ya que los servidores suelen ser sensibles a mayúsculas y minúsculas y las tildes pueden causar errores. Es mejor usar nombres de carpetas sin acentos, como imagenes.
En tu CSS, hay un error crítico en el selector para el estilo del botón activo. Donde dice #slideshow.pagination li, current a está mal escrito. Debe ser #slideshow .pagination li.current a (sin coma y con un punto antes de current). Este estilo es el que da color al botón de la página actual.
Un consejo final: SlidesJS es un plugin muy antiguo y puede tener problemas de compatibilidad. Si tras estas correcciones no funciona, te recomendaría buscar una solución más moderna y mantenida. Puedes crear un slideshow básico con funcionalidad similar usando solo CSS3 y un poco de JavaScript, o utilizar bibliotecas actuales como Swiper.js, que es mucho más robusta y fácil de implementar.