我有一个Revolution Slider滑块,每个幻灯片都有一个文本层。我试图将文本层放置在滑块下方,而不是幻灯片图像上方。
我尝试过调整Revolution Slider设置并设置自定义css,但是它没有用-一旦图层开始移出图像区域,该图层就会被裁剪。 屏幕快照显示了将图层设置为使底部与-40的voffset对齐的结果-
<div id="rev_slider_1" class="rev_slider" data-version="5.0">
<ul>
<li data-transition="fade">
<img src="images/slider/slider1.png" width="450">
<div class="tp-caption tp-resizeme rs-parallaxlevel-0 c-font-bold custom-caption"
data-x="center" data-hoffset="0"
data-y="bottom" data-voffset="-40"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
data-responsive_offset="on"
data-visibility="on"
data-width="auto"
data-basealign="grid"
data-elementdelay="0.1" >
<h3>Heading 1</h3>
<p>Paragraph text 1</p>
<a href="#" class="btn btn-gradient">GET STARTED</a>
</div>
</li>
<li data-transition="fade">
...
</li>
<li data-transition="fade">
...
</li>
</ul>
初始化轮播的Javascript-
jQuery('#rev_slider_1').show().revolution({
delay: 300000,
sliderType: 'carousel',
carousel: {
maxVisibleItems: 3,
space: 20,
infinity: 'on',
stretch: 'off',
border_radius: '10px',
horizontal_align: 'center',
fadeout: 'on',
vary_fade: 'on',
maxRotation: 20,
minScale: 10
},
sliderLayout: 'auto',
navigation: {
arrows: {
enable: true,
style: 'hesperiden',
hide_onleave: false
},
bullets: {
enable: true,
style: 'hesperiden',
hide_onleave: false,
h_align: 'center',
v_align: 'bottom',
h_offset: 0,
v_offset: 20,
space: 5
}
}
});