Tengo una página donde uso algunos controles Sliders para mostrar imágenes, el dia de hoy solo ingresé para verificar cómo estaba funcionando la página y encontre que no muestran las Imágenes, solo un cuadro negro donde se deben mostrar las imágenes:
Aquí puede ver el problema, verifiqué el código y no puedo encontrar la solución, supongo que tiene que ver con algún cambio en las Bibliotecas Jquery, ya que antes funcionaba.
Aquí está el Código donde agrego el Jquery JS:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/menu.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.slides.js"></script>
<script>
$(function(){
$(".slidejs-container").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: 5000,
// [number] Time spent on each slide in milliseconds.
auto: true,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay: 2500
// [number] restart delay on inactive slideshow
}
});
});
</script>
Aquí está el código en PHP para mostrar las imágenes:
<section id="slideshow1">
<img class="thumb9" src="images/IMG-20140312-WA0002.jpg" alt="thumbail #1" />
<div class="slidejs-container">
<div><a href="#"><img src="images/n.jpg"/></a></div>
<div><a href="#"><img src="images/ff.jpg"/></a></div>
<div><a href="#"><img src="images/kk.jpg"/></a></div>
<div><a href="#"><img src="images/hh.jpg"/></a></div>
<div><a href="#"><img src="images/gg.jpg"/></a></div>
<div><a href="#"><img src="images/jj.jpg"/></a></div>
<div><a href="#"><img src="images/ll.jpg"/></a></div>
<div><a href="#"><img src="images/mm.jpg"/></a></div>
<div><a href="#"><img src="images/nn.jpg"/></a></div>
<div><a href="#"><img src="images/ww.jpg"/></a></div>
<div><a href="#"><img src="images/xx.jpg"/></a></div>
<div><a href="#"><img src="images/yy.jpg"/></a></div>
<div><a href="#"><img src="images/zz.jpg"/></a></div>
</div>
Ahora necesito que el slider sea de ese tamaño, así que aquí está el CSS para ello:
/*...Slideshow1...*/
#slideshow1 {
width:40%;
height:10%;
float:right;
background:#000;
margin-bottom:50px;
margin-left:10px;
margin-top:0px;
}
#slideshow1 .thumb9{
width:350px;
height:190px;
float:left;
margin:0px 10px 10px 0px;
}
#slideshow1 .pagination{
margin:26px 0px;
width:100px;
color:#fffff;
display:none;
}
#slideshow1 .pagination li{
float:left;
margin:0px 5px;
list-style:none;
color:#FFFFFF;
display:none;
}
#slideshow1 img{
width:100%;
height:50%;
}
#slideshow1 .slidesjs-pagination li a{
display:none;
width:12px;
height:0px;
padding-top:12px;
background:none;
float:left;
display:none;
overflow:hidden;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
}
#slideshow1 slidesjs-navigation ul{
color:#ffffff;
display:none;
}
#slideshow1 slidesjs-play slidesjs-navigation slidesjs-playing{
color:#ffffff;
display:none;
}
#slideshow1 slidesjs-stop slidesjs-navigation{
color:#ffffff;
display:none;
}
#slideshow1 .slidesjs-navigation{
text-decoration: none;
display:none !important;
float:right;
color:#FFFFFF;
}
#slideshow1 ul.slidesjs-pagination{
color:#FFFFFF;
display:none;
}
Finalmente, descargué desde el inicio los archivos JS que sumaron arriba.
jquery.slides.js:
Que puedes ver desde este enlace
y jquery.slides.min.js:
Que puedes ver desde este enlace
Información adicional: utilicé el navegador Chrome y parece que está moviendo las imágenes, pero veo la información de las herramientas de Chrome dice Overflow Hidden, pero cuando borro eso en las Herramientas para desarrolladores del navegador Chrome todavía no muestra ninguna imagen.
¿Alguna idea sobre cómo resolver este problema?