Плагин jQuery - MobilySlider

MobilySlider - плагин jQuery слайдера (5KB).

Особенности:

  • Можно использовать HTML контент.
  • Циклическое прокручивание слайдов.
  • автоматическая генерация указателей страниц.
  • Автоматическая генерация элементов управления.
  • Автопроигрывание.
  • Эффекты перехода между страницами:  вертикальное и горизонтальное проскальзывание, затухание.
  • Пауза проигрывания в момент, когда курсор мыши находится на слайдере.
  • Возвратные функции.

 

JavaScript

Для опций указаны значения по умолчанию: 

$('.slider').mobilyslider({
    content: '.sliderContent', 		// класс для контейнера слайдера
    children: 'div', 					// селектор слайдов
    transition: 'horizontal', 			// эффект перехода между слайдами: horizontal, vertical, fade
    animationSpeed: 300, 				// скорость перехода между слайдами в ms
    autoplay: false,					// включение автопроигрывания
    autoplaySpeed: 3000, 				// время показа слайда в ms
    pauseOnHover: false, 				// остановка автопроигрывания при наведении курсора мыши
    bullets: true, 					// генерация указателя слайдов (true/false, класс: sliderBullets)
    arrows: true, 						// генерация стрелок вперед/назад (true/false, класс: sliderArrows)
    arrowsHide: true, 					// выводим стрелки только при наведении курсора мыши
    prev: 'prev', 						// имя класса для кнопки назад
    next: 'next', 						// имя класса для кнопки вперед
    animationStart: function(){}, 		// возвратная функция, которая вызывается при запуске перехода между слайдами
    animationComplete: function(){} 	// возвратная функция, которая вызывается после завершения перехода между слайдами
});

 

HTML

<div class="slider">
    <div class="sliderContent">
        <div class="item">
            <!-- Любой контент HTML -->
        </div>
        <!-- следующий слайд -->
    </div>
</div>

 

CSS

.slider {
    width:; /* задаем ширину и высоту */
    height:;
    position:relative;
}
 
.sliderContent {
    width:; /* задаем ширину и высоту */
    height:;
    float:left;
    position:relative;
    overflow:hidden;
}
 
.sliderContent .item {
    width:; /* задаем ширину и высоту */
    height:;
    position:absolute;
    background:#fff;
}

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^