Адаптивный слайдер с миниатюрами
Приветствую всех посетителей сайта! Прошлый раз я обещала поделиться с вами интересными вариантами слайдеров и галерей для оригинального оформления своих сайтов. Сегодня мы рассмотрим адаптивный слайдер, работающий как в автоматическом режиме слайд-шоу, так и при ручной навигации.
Чем хорош адаптивный слайдер? Прежде всего тем, что он подстраивается под размеры экрана пользователя и поэтому корректно отображается на мобильных устройствах. В настройках задается минимальный размер экрана и максимальный, в связи с чем содержимое слайдера отображается без прокрутки и на телефоне и на компьютере.
Кроме адаптивности, данный слайдер выводит миниатюры, при наведении на которые появляются соответствующие полноразмерные слайды. Также при смене слайдов происходит анимированная смена заголовков (текста на слайдах).
Всего в слайдере семь изображений, которые при выборе режима "слайд-шоу" чередуются друг за другом с небольшим интервалом, который можно настроить самостоятельно.
Устанавливается слайдер стандартным образом, трудностей не должно возникнуть даже у начинающих вебмастеров. Ниже мы пошагово рассмотрим весь процесс установки, а пока давайте подготовим изображения для слайдера.
Как я уже сказала, нам потребуется 7 изображений полноразмерных (1280х500рх) и 7 превьюшек (222х272рх). Для примера я подготовила изображения 3D-обложек на одинаковом фоне. Вы можете последовать моему примеру, а можете подобрать разные изображения, главное, чтобы по размеру они были одинаковые.
Если будете делать на одинаковом фоне, то небольшой совет: размещайте картинку на основном фоне по центру и отступайте от верха и низа, иначе на больших экранах изображение будет немного обрезаться сверху, как в моем примере: некоторые обложки вверху не полностью видны.
Для превьюшек я применила виньетку по краям, чтобы придать немного глубины, но это уже дело вкуса. Можете просто уменьшить исходные изображения до нужного размера и все. Ниже два скриншота слайдера - один с экрана ноутбука разрешением 1366х768рх, после чего уменьшенный почти в два раза, и скрин с экрана Sony Xperia P 540х960рх почти в натуральную величину.
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Не забудь заглянуть в свою почту и подтвердить подписку!
Как видите, при уменьшении размеров экрана, картинка тоже уменьшается, при этом текстовая надпись на слайде смещается вниз под изображение. Посмотреть рабочий слайдер можно на этой странице. Изменяя размеры окна браузера, вы увидите транформацию слайдера.
На дизайн страницы со слайдером внимание не обращать:)), это лишь начало рабочего процесса, но заказать любую 3D-обложку для своих продуктов (электронной книги, видеокурса, журнала, фотоальбома, CD и т.д.) можно уже сейчас. Ну вот, порекламировалась, теперь можно и к установке слайдера переходить:))
Итак, после того, как изображения готовы, приступаем к установке.
ШАГ 1. Скачиваем и распаковываем архив с файлами (под статьей). Заменяем картинки в папке images своими, названия и расширения лучше оставить исходными, чтобы не менять их в коде.
ШАГ 2. Теперь идем на сервер хостинга, в корневую папку и создаем там новую директорию, например, папку elast_slider, в которой будут храниться все файлы слайдера. После чего из архива в созданную директорию перетягиваем папки images, css, js.
ШАГ 3. Теперь подключаем к сайту стили и пару строк кода для адаптивности слайдера. Для этого между тегами <head> и </head> прописываем следующий код:
<title>Адаптивный слайдер с миниатюрами</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Адаптивный слайдер с миниатюрами и анимацией заголовков" />
<meta name="keywords" content="слайдер на jquery, css3, адаптивный слайдер, респонсивный слайдер, резиновый слайдер, слайдер с миниатюрами" />
<link rel="stylesheet" type="text/css" href="elast_slider/css/demo.css" />
<link rel="stylesheet" type="text/css" href="elast_slider/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic' rel='stylesheet' type='text/css' />
<noscript>
<link rel="stylesheet" type="text/css" href="elast_slider/css/noscript.css" />
</noscript>
Строки с описанием и ключевиками можете удалить, это я для seo-оптимизации автоматически прописала либо можете изменить информацию в них на свою. Если вы на сервере создали папку elast_slider, то больше менять в этом коде ничего не нужно. Если ваша папка называется иначе, то указываете ее название там, где она выделена синим цветом.
ШАГ 4. На странице сайта, в том месте, где хотите видеть слайдер, между тегами <body> и </body> вставляете html-код для картинок, подключения библиотеки jquerry и проигрывания слайдов в выбранном режиме. В исходном коде выбран режим слайд-шоу, если хотите изменить его на ручное перелистывание, то в последних строках кода вместо
animation: 'center',
autoplay: true,
slideshow_interval: 3000,
titlesFactor: 0
вставьте такие строки:
easing: 'easeOutExpo',
titleeasing: 'easeOutExpo',
titlespeed: 1200
Теперь, также как и в предыдущем шаге, в html-коде заменяете название папки elast_slider на свое, если создали папку с другим названием. Также меняете заголовок слайда (текст) на свой, т.е. вместо "Стильный дизайн" вписываете свой текст и так в каждом слайде. Весь код приводить не буду, длинноват он (найдете его в архиве), приведу лишь фрагмент кода для первого слайда:
<img src="elast_slider/images/large/1.jpg" alt="image01" />
<div class="ei-title">
<h2>Стильный</h2>
<h3>дизайн</h3>
</div>
Таких участков в коде семь - для каждого полноразмерного изображения плюс после них идет списком семь строк подряд для превьюшек. Там тоже нужно заменить название папки elast_slider на свое.
Затем идет несколько строк с подключением библиотеки из хранилища Гугл и скриптов, в них тоже не забудьте заменить название папки:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="elast_slider/js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="elast_slider/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
Теперь, когда все подключено, загружаем страницу со слайдером на сервер и проверяем его работоспособность. Все работает! Отличный слайдер!
Надеюсь, установка для вас оказалась несложной и теперь вы можете украсить дизайн своего проекта вот таким оригинальным слайдером. Для поклонников Пейджа я записала видеокурс, в котором показала на конкретных примерах быструю установку вот таких "прелестей" на свой сайт и раскрыла секрет, как вставить любой код между тегами <head> и </head> всего лишь двумя кликами мыши.
К сожалению, в Пейдже нет возможности переключиться в режим html-кода, вставить нужные строки и вернуться снова в текстовый редактор, но есть другая возможность это сделать без экспорта страницы, что экономит массу времени и нервов в процессе сайтостроения.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки бесплатно получат набор профессиональных веб-теней с известного фотостока для своих изображений. Все тени в формате png (на прозрачном фоне), поэтому беспроблемно подойдут к любому изображению. Теперь вы сможете достойно представить посетителям любую графику на своем сайте.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
Ниже несколько примеров использования теней для изображений, в архиве вы найдете более 40 образцов. Согласитесь, отличный арсенал для тех, кто еще не освоил Фотошоп или экономит время.
