» »

Адаптивный 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 Загрузок: 9 Просмотров: 547 Комментарий: (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
Соглашусь, что хороший слайде, простой и главное чтоб работал без всяких лагов.
avatar
StimuL 22.08.2016 20:1113
0
flex-caption
не Адаптивный
Angerfist
Angerfist 22.08.2016 20:5114
0
Да я что-то не подумал, следил только за реакцией слайдера) Как пример можно просто присвоить в медиа запросе display: none для разрешения экрана когда текст начнёт выпирать.

Или же overflow: hidden... Вообщем решение можно найти.
avatar
StimuL 22.08.2016 20:5415
0
скажи как правильно прописать, а то css не особо дружу
Angerfist
Angerfist 22.08.2016 21:0116
0
Попробуй так в конце стилей
Код

@media only screen and (max-width: 480px) {
.flex-caption {display:none;}
}


После ширины 480px убираем надписи.
avatar
StimuL 22.08.2016 21:0917
0
все равно появляется белый цвет тык
Angerfist
Angerfist 22.08.2016 21:1118
0
Сам сайт не адаптивный, как смотреть?
avatar
StimuL 22.08.2016 21:1319
0
это я в курсе меня интересует только слайдер
Angerfist
Angerfist 22.08.2016 21:1320
0
Хотя я сейчас проверил на тестовом быстро, текст не выпирал у него же рамки есть в стилях занимать ширину 96%, он уходит вниз.
avatar
StimuL 22.08.2016 21:1521
0
вот я про это говорю белый цвет появляеться
Angerfist
Angerfist 22.08.2016 21:1822
0
Сейчас 5 минут снова залью файлы на сайт и закрашу фон в тёмный чтоб понять
Angerfist
Angerfist 22.08.2016 21:4823
0
Эта полоса фон слайдера и он заполняет промежуток, поэтому выход не меняя свойств слайдера (стилей) сделать фон того же цвета)

тут /* FlexSlider Default Theme
.flexslider поменять белый цвет на твой цвет фона надписи
Angerfist
Angerfist 22.08.2016 23:0124
0
Вообщем не стал я изобретать велосипед, просто надо сделать как я уже выше написал, сделать фоны одного цвета у слайдера и надписей.

Либо удаляем в CSS слайдера стили где задаётся цвет фона,рамка и тени...
1 2 »
avatar