Jump to content

Проблема со слайдером


macbeth9
 Share

Recommended Posts

Здравствуйте есть еще одна проблема.Имеется слайдер но не работают переключатели фото.Нужно сделать чтобы при нажатии на одну из стрелок переключалось фото назад и вперед

2d430bc53c5e.jpg

вот код слайдера

<div id="screen">

<div class="prev"></div>

<div id="navigation">

<ul>

<li><a><img src="slider/foto_01_thumb.jpg" alt=""></a></li>

<li><a><img src="slider/foto_02_thumb.jpg" alt=""></a></li>

<li><a><img src="slider/foto_03_thumb.jpg" alt=""></a></li>

<li><a><img src="slider/foto_04_thumb.jpg" alt=""></a></li>

<li><a><img src="slider/foto_05_thumb.jpg" alt=""></a></li>

</ul>

</div>

<div id="sections">

<ul>

<li><img src="slider/foto_01.jpg" alt=""></li>

<li><img src="slider/foto_02.jpg" alt=""></li>

<li><img src="slider/foto_03.jpg" alt=""></li>

<li><img src="slider/foto_04.jpg" alt=""></li>

<li><img src="slider/foto_05.jpg" alt=""></li>

</ul>

</div>

<div class="next"></div>

</div>

Link to comment
Share on other sites

jquery и css

css

#screen {
width: 495px;
height: 310px;
background: url('slider/fon.png') no-repeat;
text-align: left;
position: relative;
z-index: 1000;
}

#navigation {
width: 400px;
height: 36px;
position: absolute;
top: 280px;
left: 10px;
}

#navigation li {
list-style-type: none;
margin-right: 7px;
float: left;
}

#screen .prev, #screen .next {
display: block;
}

#screen .prev {
width: 16px;
height: 18px;
background: url('slider/arrow.png') no-repeat;
position: absolute;
top: 283px;
left: 430px;
cursor: pointer;
}

#screen .next {
width: 16px;
height: 18px;
background: url('slider/arrow.png') -16px 0px no-repeat;
position: absolute;
top: 283px;
left: 450px;
cursor: pointer;
}

#sections {
width: 493px;
height: 273px;
clear: left;
overflow: hidden;
margin-left: 1px;
padding-top: 1px;
}

#sections ul {
width: 2465px;
}

#sections li {
float: left;
overflow: hidden;
}

Edited by macbeth9
Link to comment
Share on other sites

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy