Revolution滑块-旋转木马滑块外部的文本层

时间:2019-09-12 17:01:03

标签: css revolution-slider

我有一个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
        }
    }
});

Screenshot of slide with text layer being cropped at bottom

0 个答案:

没有答案