У меня есть страница, на которой я использую ползунки для отображения изображений, теперь я просто зашел, чтобы проверить, как работает страница, и на ней нет изображений, просто черный ящик, в котором должны отображаться изображения:
Здесь вы можете увидеть проблему, теперь я проверил код и не могу найти решение, я предполагаю, что это связано с некоторыми изменениями в библиотеках Jquery как он работал раньше.
Вот код, в который я добавляю 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>
Вот код PHP для отображаемых изображений:
<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>
Теперь мне нужно, чтобы ползунок был такого размера, поэтому вот CSS для него:
/*...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;
}
Наконец, я с самого начала загрузил файлы JS, которые добавлены вверху .
jquery .slides. js:
Что вы можете просмотреть по этой Link
и jquery .slides.min. js:
Что вы можете просмотреть по этой Ссылка
Дополнительная информация: я использовал браузер Chrome, и мне кажется, что он перемещает изображения , но я вижу информацию о том, что переполнение скрыто, но когда я удаляю ее из Chrome инструментов разработчика браузера, все равно не отображаются изображения.
Есть идеи, как решить эту проблему?