Слайдер для html сайта

Слайдер стал пользоваться большой популярностью сравнительно недавно. Где-то на половине всех шаблонов можно встретить слайдер.

Слайдер представляет из себя область сайта (как правило центральная часть, сразу после шапки). Его цель сделать сайт более информативным, “живым”, попытка в нескольких картинках описать достоинства компании или товара.

Вариантов создания слайдера множество. Мы рассмотрим несколько самых популярных из низ. К каждому способу будут приведены исходники.

Вариант №1. Слайдер на JQuery (JavaScript)

<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="slider-wrap">
<div id="slider">
<div class="slide"><img src="foto1.jpg" width="500" height="300"></div>
<div class="slide"><img src="foto2.jpg" width="500" height="300"></div>
<div class="slide"><img src="foto3.jpg" width="500" height="300"></div>
</div>
</div>
</body>
</html>

Это фотография, что получится с помощью этого варианта (ниже представлен исходник с этим примером)

Для работы слайдера Вам необходимо сделать следующее:

  • Подключить javascript (ява файлы) в заголовочных тегах
  • Файл стилей опять же в заголовочных тегах
  • В месте где нужно вывести слайдер заполнить тег <div> (как в примере выше)

Скачать исходник с примером »





Вариант №2. Слайдер на основе CSS

Дабы не нагружать сайт лишними скриптами, есть отличный способ сделать слайдер только на основе CSS (т.е. чисто на стилях). Давайте рассмотрим пример.

<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="slide">
<input type="radio" name="slider2" id="slider2_1" checked="checked">
<label for="slider2_1"></label>
<div><p>Пример №1 </p> <img src="foto1.jpg"></div>
<label for="slider2_2"></label>
<input type="radio" name="slider2" id="slider2_2">
<label for="slider2_2"></label>
<div><p>Пример №2 </p> <img src="foto2.jpg"></div>
<label for="slider2_3"></label>
<input type="radio" name="slider2" id="slider2_3">
<label for="slider2_3"></label>
<div><p>Пример №3 </p> <img src="foto3.jpg"></div>
<label for="slider2_4"></label>
</div>
</body>
</html>

Вот, что должно получится:


Пример №1.

Пример №2.

Пример №3.

На мой взгляд, довольно простой и хороший слайдер. Плюс здесь можно легко дописывать текст к каждой фотографии. с помощью тега <p>, а если нет необходимости, то его можно не писать.

Можно добавлять еще слайдеры (в примере всего три фото).

Скачать исходник с примером »




Читайте также:

• Как добавить кнопку "Наверх" на сайте

• Как сделать якорь ссылки

• Как скруглить углы в HTML через CSS

• Как вставить музыку на сайте

• Как сделать карту изображений (карта ссылок)

• Как сделать обтекание картинки текстом

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.