Слайдер для html сайта. Слайдеры на основе JQuery и на CSS

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

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

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

Вариант №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 уроков и советов