Автор

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

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

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


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

Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.


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

Формат SVG делает сайт, более интересным. Это действительно много творческих возможностей для интересных эффектов на веб-сайт с использованием SVG. Сегодня мы хотели бы поделиться с вами двумя экспериментальными понятиями, которые используют анимацию, ставших популярными благодаря анимации на PlayStation 4 и Xbox одновременно.


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

Сегодня мы сделаем новую фото галерею. Недавно я обнаружил еще один приятный JQuery плагин - Galleriffic. Этот плагин хорошо оптимизирован для работы с большими объемами фотографий. Также есть хорошие возможности, как на маленькую картинку, навигации (с нумерацией страниц), jQuery.history плагин интеграции, слайд-шоу с Play/Pause, клавиатуры и т.д.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close