Автор

21 04.2013
Горизонтальный ротатор слайдов на jQuery

Горизонтальный ротатор слайдов на jQuery


 

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..

 

ДЕМО
ИСХОДНИКИ

 

В данном плагине можно использовать две возвратные функции: при активации слайда и при завершении перехода. В состав плагина включены две темы оформления.

И так, для начала включаем jQuery, стили CSS liteAccordion и код JavaScript liteAccordion:

<head>
    <link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
    ... <!-- Перед закрывающим тегом body -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</body>

Затем создаем структуру аккордеона, для этого вставляем разметку для плагина liteAccordion в код страницы:

<div class="accordion">
    <ol>
        <li>
            <h2><span>Слайд №1</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Слайд №2</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Слайд №3</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Слайд №4</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Слайд №5</span></h2>
            <div></div>
        </li>
    </ol>
</div>

Для вызова плагина используем:

<script>
    $('#yourdiv').liteAccordion();
</script> 

Теперь рассмотрим некоторые опции плагина, ниже перечислены параметры с указанием значений по умолчанию:

containerWidth : 960,           // ширина аккордеона (px)
containerHeight : 320,          // высота аккордеона (px)
headerWidth : 48,               // ширина закладок (px)

firstSlide : 1,                 // номер активного слайда при загрузке страницы (integer)
onActivate : function() {},     // возвратная функция, которая запускается при нажатии кнопки мыши (function)
slideSpeed : 800,               // скорость анимации слайда (ms)
slideCallback : function() {},  // возвратная функция, которая запускается после завершения анимации слайда (function)

autoPlay : false,               // автоматичсекая прокрутка слайдов (boolean)
pauseOnHover : false,           // пауза автоматической прокрутки при наведении курсора мыши на слайд
cycleSpeed : 6000,              // время показа слайда (ms)

theme : 'basic',                // тема оформления аккордеона ('basic', 'dark')
rounded : false,                // использовать закругленные углы (boolean)
enumerateSlides : false         // выводить номер слайда в закладке

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

11 04.2013
Горизонтальный ротатор слайдов на jQuery

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 - основой будут css3 transitions.

Не устаю напоминать, что результаты данного урока будут работать только в современных поддерживающих CSS3 браузерах, таких как Chrome, Firefox, Safari. Идея урока состоит в том, чтобы создать необычную круглую миниатюру, которая будет анимироваться при наведении на неё курсора.


28 11.2014
Горизонтальный ротатор слайдов на jQuery

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


29 09.2014
Горизонтальный ротатор слайдов на jQuery

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


27 04.2013
Горизонтальный ротатор слайдов на jQuery

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


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close