» »

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


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

Еще один очень красивый слайдер, что можно его установить под любую тематику, это может быть как игровая и остальные. Также при установке он безусловно поменяет дизайн вашего сайта. И не забываем, что плюс идет функциональность самого ресурса. У него есть про мотка, вы можете выставить еще и время на его, но все как у основных. только вот стилистика его совершенно другая от любого, чем его можно сказать относиться к оригинальным.

Завершу тему слайдеров этим популярным и лёгким для сайта слайдером - FlexSlider. Взял с источника всё что нужно и немного его подретушировал. Адаптивный jQuery слайдер поддерживается во всех основных браузерах, анимации затухания и выскальзывания, различные опции для настройки, навигация направления и т.д.

Добавьте следующие пункты в раздел вашей страницы:

Код
<link rel="stylesheet" href="/flexslider/flexslider.css" type="text/css">  
<script src="/flexslider/flexslider-min.js"></script>


Добавляем Html разметку слайдера, разместите ваши изображения и подписи в пунктах списка
и разметка готова к работе:

Код
<div class="flexslider">  
<ul class="slides">  
  <li>  
  <img src="/flexslider/slide-1.png" />  
  <p class="flex-caption">День независимости: Возрождение (2016) — Independence Day: Resurgence</p>  
  </li>  
  <li>  
  <img src="/flexslider/slide-2.png" />  
  <p class="flex-caption">Стартрек: Бесконечность (2016) — Star Trek Beyond</p>  
  </li>  
  <li>  
  <img src="/flexslider/slide-3.png" />  
  <p class="flex-caption">Люди Икс: Апокалипсис (2016) — X-Men: Apocalypse</p>  
</li>  
</ul>  
</div>


И в завершении надо добавить следующий код Javascript в раздел вашей страницы ниже ссылок,
в скрипт я добавил сразу несколько свойств для настройки:

Код
<script type="text/javascript">  
  $(function(){  
  SyntaxHighlighter.all();  
  });  
  $(window).load(function(){  
  $('.flexslider').flexslider({  
  animation: "slide",  
  slideshowSpeed: 8500,  
  animationDuration: 1000,  
  directionNav: true,  
  controlNav: false,  
  keyboardNav: true,  
  slideshow: true,  
  prevText: "Previous",  
  nextText: "Next",  
  slideToStart: 0,  
  pauseOnAction: true,  
  pauseOnHover: false,  
  start: function(slider){  
  $('body').removeClass('loading');  
  }  
  });  
  });  
  </script>


Все доступные свойства FlexSlider, в списке ниже перечислены все доступные опции с их значениями по умолчанию:

Код
animation: "fade", //Выбор типа анимации (fade/slide)  
slideshow: true, //Включание автопроигрывания слайдшоу (true/false)  
slideshowSpeed: 7000, //Установка скорости переключения слайдов в слайдшоу, в миллисекундах  
animationDuration: 500, //Скорость выполнения анимации, в миллисекундах  
directionNav: true, //Включение навигации предыдущий/следующий (true/false)  
controlNav: true, //Включение постраничной навигации (true/false)  
keyboardNav: true, //Включение навигации с использованием клавиатуры(true/false)  
prevText: "Previous", //Текст для пункта "предыдущий" directionNav  
nextText: "Next", //Текст для пункта "следующий" directionNav  
slideToStart: 0, //Слайд, с которого начинается слайдшоу. Нумерация слайдов по правилу массива(0 = первый слайд)  
pauseOnAction: true, //Включение паузы сладшоу при взаимоодействии с управляющим элементом (true/false)  
pauseOnHover: false, //Включение паузы слайдшоу при наведении курсора мыши на слайд, затем слайдшоу продолжается (true/false)  
controlsContainer: "" //Дополнительное свойство: можно указать контейнер для элементов навигации. По умолчанию используется контейнер слайдера. Если указанный элемент не будет найден, используется значение по умолчанию.


Не забываем скачать архив!
21.08.2016 Загрузок: 14 Просмотров: 789 Комментарий: (28)

Поделиться в социальных сетях

Материал разместил

Комментарий: 28
Kosten
Kosten 21.08.2016 16:231
0
Его можно поставить не то что на кино сайт, на таких тематиках такие слайдеры не идут. А вот под игру, или можно взять какой то официальный сайт конторы, то можно увидеть, но не такой, а по размерам. Думаю отлично также будет смотреться и подойдет на интернет магазины, просто не приходилось его ранее видеть.
Angerfist
Angerfist 21.08.2016 16:343
0
В настройках можно убрать кнопки, true на false или также добавить
спрайты или надписи вперёд назад, а надписи убираем в тегах p
с классом flex-caption вместе с тегами и будет голый слайдер, там даже вид анимации
можно менять...так что и под твои капризы на кино сайте отрегулировать можно)
Brung
Brung 21.08.2016 16:282
0
Вот это, то что нужно, точно будет все теперь оригинально, вывод мне нравится, и кнопки, которые в дизайн отлично все поставлены. Вот это материал который давно искал, а то в интернете одно и тоже.
FeStemBer
FeStemBer 21.08.2016 16:374
0
Вообще трудно представить музыкальный или игровой сайт без такого слайдера. Он должен не как у кино сайта идти, а вот именно такой размер, спасибо кто адаптировал.
Сафрон
Сафрон 21.08.2016 16:395
0
Так он по надписи видно, что взят с кино сайта, что думаю только сам сайт украсит.
Angerfist
Angerfist 21.08.2016 16:426
0
Это уже я изображения свои вставлял и надписи) Просто стили редактировал под кино сайт. На источнике слайдера кулинарные изделия)
Kosten
Kosten 21.08.2016 16:437
0
Angerfist, его также можно по размерам вывести как тебе нужно.
Angerfist
Angerfist 21.08.2016 16:459
0
Ты вредный человечище))) в стили не смотришь, он адаптивный, под контент подстроится, но всё равно картинки одинакового размера лучше чтоб пропорции были одинаковы
Kosten
Kosten 21.08.2016 16:5610
0
Что поделаешь, лучше больше информации, чем потом на вопросы отвечать, когда все уже написано.
Angerfist
Angerfist 21.08.2016 16:448
0
В CSS файле с источника и в моём есть различия, поэтому даю ссылку на исходник Ссылка

И добавлю в CSS файле слайдера стоит фоновый цвет белый, советую фоновый цвет надписей flex-caption делать таким же как у слайдера, (не обязательно белый, свой цвет).
JoniDen
JoniDen 21.08.2016 18:4511
0
Давно хотел к себе слайдер установить.
feliksteg
feliksteg 21.08.2016 22:4112
0
Соглашусь, что хороший слайде, простой и главное чтоб работал без всяких лагов.
1 2 »
avatar