Для начала необходимо создать html разметку под слайдер.
#content — имитация блока на сайте, внутрь которого мы будем помещать сам слайдер.
#slider -блок самого слайдера
.left,.right — кнопки управления
.images — блок с картинками
.pict — дивы, которые оборачивают изображения
<div id="content">
<div id = "slider">
<div class="left"><img src="images/arrow.png"></div>
<div class="right"><img src="images/arrow.png"></div>
<div class="images">
<div class="pict"><img src="images/1.jpg"></div>
<div class="pict"><img src="images/2.jpg"></div>
<div class="pict"><img src="images/3.jpg"></div>
</div>
</div>
</div>
Далее css, в нем нет ничего сложного. Все изображения получают float:left, #slider получает позиционирование relative, чтобы кнопки управления можно было выровнять с помощью absolute. Правая кнопка поворачивается на 180 градусов, чтобы не пришлось использовать еще одну картинку стрелки.
Читать полностью »