首先我创建了自己的幻灯片，但无法设置过渡，因为只显示淡入淡出效果。滑块有数据 - kenburns效果，并在其他转换效果包含在代码后停止，我不知道代码的问题在哪里。 请指教。 这是滑块的代码：
if($homeSliders)
{
echo ' <div class="tp-banner-container">
<div class="tp-banner" >
<ul> <!-- SLIDE -->';
foreach ($homeSliders as $homeSlider)
{
?>
<li data-transition="<?= $homeSlider->effect->title ?>" data-slotamount="1" data-masterspeed="1500" data-delay="10000" data-saveperformance="off" data-title="Latest Collections" data-kenburns="on" data-bgposition="left top"
data-bgpositionend="center top"
data-bgfit="200"
data-bgfitend="100"
data-duration="200"
style="background-color: #F6F6F6;" >
<img src="<?= $homeSlider->getImg($homeSlider->id) ?>" alt="kenburns1" data-bgposition="center bottom" data-bgpositionend="center top" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-blurstart="0" data-blurend="0" data-offsetstart="0 0" data-offsetend="0 0" class="rev-slidebg" data-no-retina >
<div class="tp-caption <?=$homeSlider->title_show?> tp-resizeme revo-slider-caps-text uppercase"
data-x="450"
data-y="150"
data-speed="400"
data-start="1000"
data-easing="<?=$homeSlider->title_show?>"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.<?=$homeSlider->title_show?>" style=""><img src="<?= $homeSlider->getImgProduct($homeSlider->id) ?>" alt="<?=$homeSlider->title?>"></div>
<?php if ($homeSlider->title) { ?>
<div class="tp-caption <?= $homeSlider->title_show ?> tp-resizeme revo-slider-emphasis-text nopadding noborder tp-resizing-positions"
data-x="<?=$homeSlider->title_top?>"
data-y="<?=$homeSlider->title_left?>"
data-speed="700"
data-start="1200"
data-easing="easeOutCubic"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeOutCubic" style=" color: <?=$homeSlider->title_color?>; max-width: 730px; width: auto; white-space: normal; line-height: 1.15; font-size: <?=$homeSlider->title_size?>px!important; min-width: 250px;"><?=($homeSlider->title ? $homeSlider->title : '' )?></div>
<?php } ?>
<?php if ($homeSlider->description) { ?>
<div class="tp-caption customin <?= $homeSlider->description_show ?> tp-resizeme revo-slider-desc-text tp-resizing-positions"
data-x="<?=$homeSlider->description_top?>"
data-y="<?=$homeSlider->description_left?>"
data-speed="700"
data-start="1400"
data-customin="x:0;y:150;z:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
data-easing="easeOutCubic"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.easeOutCubic" style="text-align: left; color: <?=$homeSlider->description_color?>; max-width: 550px; white-space: normal; font-size: <?=$homeSlider->description_size?>px!important;"><?=($homeSlider->description ? $homeSlider->description : '')?></div>
<?php } ?>
<?php if ($homeSlider->link) { ?>
<div class="tp-caption <?= $homeSlider->button_show ?> tp-resizeme tp-resizing-positions"
data-x="<?=$homeSlider->button_top?>"
data-y="<?=$homeSlider->button_left?>"
data-speed="700"
data-start="1550"
data-easing="<?= $homeSlider->effect->title ?>"
data-splitin="none"
data-splitout="none"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1000"
data-endeasing="Power4.<?= $homeSlider->effect->title ?>" class="button button-border button-large button-rounded tright nomargin hero-action-btn"><span style=" color: <?=$homeSlider->button_color?>; font-size: <?=$homeSlider->button_size?>px!important; background-color: transparent !important; border: 2px solid #22afeb; padding: 0.5em 2em !important; border-radius: 5px !important; line-height: 1.3em !important;"><a href="<?= $homeSlider->link; ?>" >more</span> <i class="icon-angle-right"></i></a></div>
<?php } ?>
<?php
echo '</li>';
}
echo '</ul></div></div>';
}
这是我的脚本代码：
jQuery(document).ready(function() {
jQuery('.tp-banner').show().revolution(
{
dottedOverlay:"none",
delay:16000,
startwidth:1140,
startheight:600,
hideThumbs:200,
navigationType:"bullet",
navigationArrows:"solo",
navigationStyle:"preview4",
navigation: {
keyboardNavigation:"on",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
touch:{
touchenabled:"on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
navigationType:"bullet",
drag_block_vertical: false
}
,
arrows: {
style:"zeus",
enable:true,
hide_onmobile:true,
hide_under:600,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
left: {
h_align:"left",
v_align:"center",
h_offset:0,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:70,
v_offset:0
}
} ,
bullets: {
enable: true,
container:"slider",
hide_onmobile: false,
style: "ares",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "bottom",
h_offset: 0,
v_offset: 30,
space: 3,
rtl:false,
tmp: ''
}
},
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
parallax:"mouse",
parallaxBgFreeze:"on",
parallaxLevels:[7,4,3,2,5,4,3,2,1,0],
keyboardNavigation:"off",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:0,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:0,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"on",
fullScreen:"off",
spinner:"spinner4",
stopLoop:"off",
shuffle:"off",
autoHeight:"off",
forceFullWidth:"off",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500,
hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
fullScreenOffsetContainer: ".header"
});
});