Revolution Slider - Как сделать разное время для разных предметов?
СИТУАЦИЯ:
Я использую для своего слайд-шоу плагин Slider Revolution.
Мне нужно установить разное время (продолжительность) для отображаемых изображений. Например, первое изображение мне нужно отобразить всего за 2 секунды, а второе изображение за 7 секунд.
ВОПРОС:
Как я могу установить время последнего элемента? Является ли это возможным?
КОД:
В функции js, которая инициализирует плагин, есть следующие настройки:delay: 9000, и, изменяя его, можно установить длительность, но будет учитываться все элементы.
Это функция js:
initRevolutionSlider: function () {
var tpj=jQuery;
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
var api = tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:960,
startheight:250,
onHoverStop:"off", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:1,
navigationType:"bullet", // bullet, thumb, none
navigationArrows:"solo", // nexttobullets, solo (old name verticalcentered), none
navigationStyle:"round-old", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"bottom", // Horizontal Align left,center,right
navigationHOffset:30,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"on", // Enable Swipe Function : on/off
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
Это HTML-код для одного элемента:
<div class="fullwidthbanner">
<li data-transition="3dcurtain-vertical" data-slotamount="10" data-speed="100" data-masterspeed="300" data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="img/slideshow/1.jpg">
</li>
</div>
В этом случае data-speed и data-masterspeed относятся ко времени перехода, а не ко времени последнего элемента.
Кто-то знает, возможно, как этого можно достичь?
Это должно быть сделано в HTML или, возможно, в функции JS?
Большое спасибо!
1 ответ
Согласно этой документации, уверен, что это для вашего плагина, он обеспечивает data-delay
Конфиг для каждого слайда.
См. Документы под заголовком "02 Slider items" на странице.
<div class="fullwidthbanner">
<li data-transition="3dcurtain-vertical"
data-delay="2000"
data-slotamount="10"
data-speed="100"
data-masterspeed="300"
data-thumb="assets/img/sliders/revolution/thumbs/thumb1.jpg">
<!-- THE MAIN IMAGE IN THE FIRST SLIDE -->
<img src="img/slideshow/1.jpg">
</li>
<li data-transition="3dcurtain-vertical"
data-delay="7000"
data-slotamount="10"
data-speed="100"
data-masterspeed="300"
data-thumb="assets/img/sliders/revolution/thumbs/thumb2.jpg">
<!-- THE MAIN IMAGE IN THE SECOND SLIDE -->
<img src="img/slideshow/2.jpg">
</li>
</div>