Слайдер с огромным количеством эффектов смены картинок и появления подписей. Минусом слайдера является большое количество подключаемых js файлов - 4 шт.
Возможности слайдера:
Можно вставлять видео;
Легко менять размеры слайдов за счет CSS;
Можно добавлять подписи, которые будут появляться с эффектами;
Возможность паузы при наведении на слайд;
Два варианта отображения слайдера;
Настройка времени и эффектов проигрывания слайдов
Возможность добавлять просто фото, фото с подписью или видео
Скачав univslaider вы найдете в index.html следующие js подписанные настройки:
<script>
$(document).ready(function(){
$('#iview').iView({
//Вариант со статус баром внизу (внизу стрелки с точками)
fx: 'strip-down-right', //эффект появления слайда по умолчанию - 64 строка все эффекты
pauseOnHover: false, //Пауза при наведении
pauseTime: 5000,
directionNav: false,
controlNav: true,
tooltipY: -15
//Вариант с полосой прокрутки и стрелками - в этом случае можно удалить raphael-min.js
/*
pauseTime: 5000,
directionNavHoverOpacity: 0,
timer: "Bar", //Bar - полоса прокрутки Pie и 360Bar - круг (если ставить его - наду удалить timerDiameter)
timerDiameter: "50%", //ширина полосы прокрутки
timerPadding: 0, //отступ линии
timerStroke: 7, //толщина линии
timerBarStroke: 0,
timerColor: "#FFF", //цвет линии
timerPosition: "bottom-right"*/
});
});
</script>
Также в слайдере легко добавлять новые картинки. Основные настройки следующие:
Заголовки подписей - могут быть с эффектами при появлении. Параметры
data-transition Эффект появления: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"
data-speed Время эффекта в миллисекундах "700"
data-x Позиция по оси X
data-y Позиция по оси Y
data-width Ширина подписи
data-height Высота подписи
Слайды
data-iview:thumbnail миниатюра
data-iview:image сам слайд
data-iview:transition эффект появления слайда "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade"
-->
Добавить комментарий