Я пытаюсь создать автоматический слайдер / карусель изображений, используя плагин цикла jQuery и опцию пейджера для навигации.
Он предназначен для постепенного перехода от одного изображения к другому и предоставляет серию элементов пейджера, которые частично покрывают изображение, как в этом примере здесь
По сути, все работает нормально, но независимо от того, что я делаю, когда пытаюсь расположить элементы пейджера сверху, изображения будут покрывать кнопки.
В настоящее время мне не хватает хостинга, и я делаю это все локально, так что извините, нет живых примеров; но вот код.
HTML:
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery.css" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides')
.before('<div id="nav">')
.cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
pager: '#nav'
});
});
</script>
</head>
<body>
<div id="content-area">
<div id="myslides">
<img src="pic1.jpg" />
<img src="pic2.jpg" />
<img src="pic3.jpg" />
<img src="pic4.jpg" />
<img src="pic5.jpg" />
</div>
</div>
</body>
</html>
CSS:
#myslides {
width: 586px;
height: 311px;
padding: 0;
margin: 0 auto;}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 586px;
height: 311px;
top: 0;
left: 0;}
#nav {
float: right;
position: absolute;
top: 200px;
float: right;}
.nav { margin: 5px 0; }
#nav a {
margin: 0 5px;
padding: 3px 5px;
border: 1px solid #ccc;
background: #fc0;
text-decoration: none }
#nav a.activeSlide { background: #ea0}
#nav a:focus { outline: none; }
и, конечно, перечисленные выше js-файлы: jquery-1.3.js & jquery.cycle.all.js