Вы вероятно неоднократно встречали сайты на которых вверху расположен большой блок на половину экрана а иногда и на полный экран в котором меняются фото,картинки или текст ,в большинстве случаев всё это вместе.Причем текст может меняться независимо от смены фото.
Такие блоки называются слайдер (с английского slider - бегунок,ползунок). В последнее время они приобрели огромную популярность.На туристических сайтах , продающих товары,автомагазинах,предлагающих услуги и многих других сайтах они выглядят очень эффектно и несут в себе много информации.
В обычном слайдере картинки меняются автоматически с заданым промежутком , или же с помощью специальных кнопок. Смена картинок происходит с многообразными эффектами. Существуют большое количество самых разных слайдеров на любой вкус.
Как же поставить у себя на сайте красивый слайдер отвечающий вашим требованиям. Основа страницы со слайдером - код HTML. Сам слайдер реализуется с помощью языка программирования JavaScript и библиотеки JavaScript jQuery. Создание слайдера - трудоемкое дело и если вы в достаточной мере не владеете JavaScript то можно скачать готовые шаблоны. Большинство VEB - дизайнеров так и делают.
Здесь я не буду описывать все этапы создания слайдера с пояснениями,потому что это займет не одну страницу, а опишу наиболее легкий способ вставки в страницу готовый шаблон.
Наберите в поисковике запрос "Скачать слайдер на сайт". Выберите из представленных шаблонов нужный вам и скачайте,соблюдая авторские права. Обычно слайдер скачивается архивом ZIP-WinRAR.Если у вас уже есть сайт то в коренной папке сайта (там где главная страница) создайте еще одну папку ,скачайте и распакуйте архив слайдера в созданную папку.Там будет файл index.html и рабочая папка.
Слайдер отображается в том месте страницы,где прописан его код.К примеру если вы установите код сразу после тега <body> он будет показываться на самом веху страницы.
Откройте в текстовом редакторе страницу вашего сайта в которую предполагается установить слайдер и вставьте скопированный код слайдера между тегами <body> </body>. В заголовке страницы <head> </head> вставьте ссылки, прописав путь от страницы где находится код слайдера до файлов CSS,JS,картинок,в общем до всех остальных файлов слайдера.
Сделайте копию страницы слайдера и замените текст в слайдере на свой если он есть.Замените картинки на свои.Поэкспериментируйте с CSS,JS,изменяя значения. Добившись нужного вам отображения слайдера сохраните страницу под первоначальным именем.
