Flexslider — бесплатный jQuery-слайдер от WooThemes
Flexslider — бесплатный jQuery-слайдер от студии WooThemes. Слайдер Flexslider обладает возможностью адаптироваться к любым разрешениям экрана и совместим со всеми основными браузерами. Помимо горизонтального слайдшоу можно использовать вертикальную смену слайдов. Есть возможность использования собственных стилей CSS и любых HTML-элементов в качестве слайдов.
Основные особенности слайдера:
— адаптируемый к любым разрешениям дизайн;
— горизонтальные/вертикальные слайды;
— любые HTML-элементы в качестве слайдов;
— использование собственных CSS стилей;
— поддержка устройств на iOS и Android;
— в архиве есть пример страницы с интегрированным слайдером;
— слайдер протестирован на совместимость с браузерами Chrome 4+, Safari 4+, Firefox 3.6+, Opera 10+, IE7+.
Установка слайдера Flexslider на страницу
1. Загрузите файлы flexslider.css, jquery.flexslider.js и jquery.flexslider-min.js к себе на хостинг.
2. Для подключения библиотеки jQuery и скрипта слайдера, в HTML-документе между тегами <head> и </head> пропишите следующий код:
<link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script>
3. Определитесь в каком месте страницы вы хотите увидеть слайдер и укажите необходимые изображения, для этого между тегами <body> и </body> пропишите следующий код:
<div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> </ul> </div>
4. Для тонкой настройки слайдера используйте следующие опции в качестве параметров к функции flexslider:
animation: "fade", //String: Select your animation type, "fade" or "slide" slideDirection: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" slideshow: true, //Boolean: Animate slider automatically slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds animationDuration: 600, //Integer: Set the speed of animations, in milliseconds directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false) controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage keyboardNav: true, //Boolean: Allow slider navigating via keyboard left/right keys mousewheel: false, //Boolean: Allow slider navigating via mousewheel prevText: "Previous", //String: Set the text for the "previous" directionNav item nextText: "Next", //String: Set the text for the "next" directionNav item pausePlay: false, //Boolean: Create pause/play dynamic element pauseText: 'Pause', //String: Set the text for the "pause" pausePlay item playText: 'Play', //String: Set the text for the "play" pausePlay item randomize: false, //Boolean: Randomize slide order slideToStart: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide) animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended. pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken. manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs. start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation after: function(){}, //Callback: function(slider) - Fires after each slider animation completes end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
Tweet
Эта запись была опубликована max 30/03/2012 в 09:18, в категории HTML, JavaScript скрипты. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |
Пока нет комментариев.
Нет трэкбэков.

Madison — HTML5/CSS3 шаблон сайта портфолио
2 года назад - Нет комментариев
Шаблон Madison — готовое решение для дизайнеров и художников, которым необходимо выставить свои работы на всеобщее обозрение. Madison содержит следующие макеты страниц — главная, блог, внутренняя страница, портфолио и страница с контактными данными. Шаблон Madison обладает адаптивным дизайном страниц и соответствует

Prologue Responsive HTML5 Theme — одностраничный HTML5 шаблон
3 года назад - Нет комментариев
Одностраничный шаблон Prologue выполнен в минималистичном стиле и соответствует самым современным требованиям стандартов HTML5 и CSS3. Шаблон обладает адаптивным дизайном, структура страницы двухколоночная, с левым расположением сайдбара. Prologue имеет четыре готовых секции — Intro, Portfolio, About Me и Contact. Переход между секциями

Ex Machina — бесплатный HTML5/CSS3 бизнес-шаблон
3 года назад - Нет комментариев
Ex Machina — бесплатный HTML5/CSS3 бизнес-шаблон. Шаблон выполнен в светлых тонах, имеет несколько макетов страниц (одна колонка, две колонки левый/правый сайдбар, три колонки) и соответствует всем требованиям современных стандартов HTML5 и CSS3. На главной странице предусмотрено место для слайдера featured-записей, футер разделен

Resort — премиум тема для WordPress от WooThemes
3 года назад - Нет комментариев
Resort — апрельский релиз от студии WooThemes. Тема Resort отличается чистым дизайном, простой цветовой палитрой и модульной структурой страниц, что позволяет создавать уникальные главные страницы. С помощью плагина корзины покупок WooCommerce, премиум тема Resort с легкостью превратится в торговую площадку, а плагин WooDojo снабдит
Shiny Theme — премиум тема для WordPress от ThemeForest
4 года назад - Нет комментариев
Shiny Theme — мартовская премиум тема для WordPress от ThemeForest. Shiny Theme является профессиональной премиум темой, предназначенной для оформления бизнес сайтов, личных портфолио-сайтов, галерей изображений и блогов на платформе WordPress. Тема Shiny Theme обладает мощной, но простой в использовании панелью управления
Shelflife — премиум тема для WordPress от WooThemes
4 года назад - Нет комментариев
Shelflife — февральская премиум тема для WordPress от студии WooThemes. Тема Shelflife предназначена для организации онлайн-магазинов, в качестве корзины покупок использован бесплатный плагин WooCommerce. Дизайн темы адаптируется к любым разрешениям, поддерживаются браузеры любых мобильных устройств. Тема имеет
Sentient — премиум тема для WordPress от WooThemes
4 года назад - Нет комментариев
Sentient — премиум тема для WordPress oт студии WooThemes. Тема Sentient предназначена для оформления Интернет-магазинов на платформе WordPress. Для организации корзины покупок использован плагин WooCommerce, также разработанный командой WooThemes. Галерея товаров выполнена с использованием jQuery-плагина Masonry, который
Quantum — универсальный бесплатный HTML/CSS шаблон
4 года назад - Нет комментариев
Quantum — универсальный бесплатный HTML/CSS шаблон. Шаблон представлен в двух цветовых схемах — синей и оранжевой. Шаблон Quantum содержит пять полностью готовых страниц (Home, Services, Portfolio, Clients, Contact). В хедере шаблона расположен небольшой слайдер featured-изображений. Quantum может применяться для оформления
SlideDeck Pro — премиум плагин для WordPress от Digital Telepathy
4 года назад - Нет комментариев
SlideDeck Pro — премиум плагин для WordPress от студии Digital Telepathy. Со слов авторов, SlideDeck Pro является одним из лучших плагинов для организации слайдшоу на платформе WordPress. Более 100 тысяч пользователей уже отдали свое предпочтение слайдеру SlideDeck Pro. Плагин не требует правки кода для интеграции, имеет собственную панель
Simple Web Elements — бесплатный набор элементов оформления в PSD
4 года назад - Нет комментариев
Simple Web Elements — набор элементов оформления в PSD. В набор Simple Web Elements вошло четыре psd-файла, содержащие более 215 элементов оформления пользовательских интерфейсов в различных цветовых вариантах. Набор