Навороченный адаптивный слайдер

Адаптивный слайдер

Время не стоит на месте, заметно меняется внешний вид сайтов в сети, особенно большой популярностью пользуется адаптивный дизайн.

Слайдеры, "карусели", "кирпичная кладка", теперь можно встретить почти на любом сайте, они могут придать легкость и изюминку сайту, особенно когда в них используются эффекты HTML5 и CSS3.




Ниже вставленный слайдер хорош тем, что:
1. Дивовый(резиновый) дизайн сам подстраивается под размер страницы.
2.Картинки могут быть совершенно разных размеров. Т.е. не обязательно подгонять все фото под один размер.
3. У слайдера есть возможность вставки видео. Можно подключить ролики с YouTube, Vimeo, Html5, Video, Wistia и аудио то же можно подключить.
4. Есть кнопка Увеличить-уменьшить.
5. Лёгкая установка.
6. Три варианта установки на Ваш выбор: Слайдер , Плитка , Карусель .
Все три варианта будут работать на одном сайте одновременно.


Примеры вставки на светлом фоне - Слайдер, тут - Плитка .
Вариант вставки на страницу цмс vBulletin, а это на отдельной странице

Скачать слайдер можно тут.

Установка слайдера:

Установка слайдера очень простая:
1.Вставляем папочку suorce2 в корень сайта.
2. Выбираете вариант слайдера, их там ТРИ - слайдер.txt, плитка.txt, карусель.txt.
Копируете содержимое желаемой конструкции на свою страницу.
3. В папочках images/big (большие фото) и images/thumbs (превьюшки) заменяете фото на свои. Это всё.

Вставка фото и видео

Названия фотографий и их количество регулируется в файликах слайдер.txt, плитка.txt, карусель.txt.
Рассмотрим вставку фото:

<img alt=" Мультфильм  Ну,погоди!" // Будет отражаться в слайдере.
src="suorce2/images/thumbs/tile6.jpg"   //Большая фото
data-image="suorce2/images/big/tile6.jpg" //Превьюшка большой фото
data-description="Ну, чумодан,погоди!"   //Описание для искалок
style="display:none"> a>       


Названия фотографий для удобства можно в обоих папках сделать одинаковым ,например цифрами -(1,2,3,4,5), второй слайдер - (21,22,23,24), слайдер три- (31,31,33,35), четвёртый (41,42,43)

Вставка видеоролика выглядит таким образом:

<img alt="Видео с Ютуба  "
data-type="youtube"
data-videoid="Y-ATemepPrk"  // ID ролика, обрубок ютубовской ссылки
data-description="Мультфильм с Ютуба">

Для вставки видео достаточно воткнуть обрубок ссылки на ролик. Той самой ссылки, которая находится на ютубе под кнопкой "Поделиться" Название ролика меняейте сами, верхняя строчка будет показываться в слайдере.

Кому святой троицы покажется мало, можно сходить на офф.сайт и допилить желаемое самостоятельно.



Адрес заметки: http://cmsina.ru/post_1433876530.html
Ваш комментарий к статье:
Правила комментирования:



cod


  • Все поля формы обязательны для заполнения.

  • e-mail не публикуется.
  • Содержание комментариев, оставленных на опубликованные материалы, является мнением лиц, их написавших, и не обязано совпадать с мнением Администратора, никоим образом не ответственного за выводы и умозаключения, могущие возникнуть при прочтении комментариев, а также любые версии их истолкования.

  • Однозначно не подлежат публикации комментарии:

  • - содержащие оскорбления любого вида (личного, религиозного, национального...);
  • - включающие неуместные теме поста ссылки, в том числе спамовые;
  • - нарушающие положения законодательства РФ.

  • Факт оформления Вами комментария является безоговорочным принятием этих условий.

^Наверх