Автор

Горизонтальный ротатор слайдов на 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         // выводить номер слайда в закладке

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


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

Это наверое самый интересный проект на сегодняшний день. Сайт создавался в двух версиях: английской и русской. Использовался американский хостинг, так как сайт рассчитан в первую очередь на американских клиентов и английская версия основная!


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

Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close