Другий крок — розбираємося в магії

Другий крок — розбираємося в магії

Магія тут дуже проста. Ми будемо використовувати тег <a> для створення переходів з одного зображення до іншого. Це дуже схоже на посилання «вгору» яке прокручує сторінку до самого верху. Єдина різниця полягає в тому, що картинки будуть прокручуватися в контейнері div, замість прокручування вгору та вниз по сторінці.

Третій крок — пишемо код HTML

Код HTML дуже простий. Таби це просто маркований список, з картинками всередині якорних тегів. Всі основні зображення знаходяться в окремих блоках DIV і також в якорних тегах. Ці блоки DIV можна використовувати як контейнери, у випадку якщо вам захочеться використовувати фонове зображення замість звичайного. Насправді без них можна і обійтися.

І так. Створюємо блок, в якому буде лежати весь слайдер:

<div id="wrapper">

</div>  

Тепер створимо всередині нього маркований список:

<div id="wrapper">

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</div> 

 

Тепер вставляємо в кожен пункт маркованого списку картинку:

<div id="wrapper">

<ul>

<li> <img src="tab1.jpg" alt="" title="" /> </li>

<li> <img src="tab2.jpg" alt="" title="" /> </li>

<li> <img src="tab3.jpg" alt="" title="" /> </li>

<li> <img src="tab4.jpg" alt="" title="" /> </li>

</ul>

</div> 

 

Візьмемо кожну картинку в якорний, налаштуємо якір та пропишемо кожному тегу ідентифікатор: