В разработку слайд-шоу на JavaScript Разработка веб-сайтов

div class="slider-nav">
<button type="button" class="slider-previous">Предыдущийbutton>
<button type="button" class="slider-next">Следующийbutton>
div>
div>

Для слайдов лучше использовать классы, поскольку на одной странице может быть несколько слайд-шоу. Для идентификации разных слайд-шоу можно использовать ID у внешнего контейнера.

Элементы с кнопками используются вместо ссылок, поскольку ссылки здесь не подходят, а с кнопками мы будем работать из скрипта (подробности читайте в материале You can’t create a button).

Если в слайдах содержатся только картинки, можно слегка поменять структуру:

<div class="slider" id="main-slider">самый внешний контейнер -->
<div class="slider-wrapper">внутренний враппер -->
<img src="image1.jpg" alt="First" class="slide" />
<img src="image2.jpg" alt="Second" class="slide" />
<img src="image3.jpg" alt="Third" class="slide" />
div>
<div class="slider-nav">
<button type="button" class="slider-previous">Предыдущийbutton>
<button type="button" class="slider-next">Следующийbutton>
div>
div>

Не забудьте добавить осмысленное значение атрибуту alt.

Для использования ссылок на страницы можно сделать следующее:

<div class="slider" id="main-slider">самый внешний контейнер -->
<div class="slider-wrapper">внутренний враппер -->
<div class="slide" id="slide-1">...div>
<div class="slide" id="slide-2">...div>
<div class="slide" id="slide-3">...div>
div>
<div class="slider-nav">
<a href="#slide-1">1a>
<a href="#slide-2">2a>
<a href="#slide-3">3a>
div>
div>

Теперь каждая ссылка ведёт на свой слайд благодаря анкору. Это специально сделано так, чтобы страница работала без JS.

Бывают слайд-шоу, комбинирующие ссылки и управление:

<