Адаптивный 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: "" //Дополнительное свойство: можно указать контейнер для элементов навигации. По умолчанию используется контейнер слайдера. Если указанный элемент не будет найден, используется значение по умолчанию. Не забываем скачать архив! | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 28 | |
|
| |
| 1 2 » | |
