• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
Главная → HTML уроки и советы → Слайдер для html сайта

Слайдер для 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 уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2021 - Zarabotat-Na-Sajte.ru