革命滑块显示文字

时间:2017-04-05 16:41:20

标签: slider revolution-slider

我正在使用旋转滑块在屏幕上从左到右动画图像(此部分正常工作)。我想在图像越过它时出现一层文字。有滑块旋转的方法吗?

1 个答案:

答案 0 :(得分:0)

             <ul>
                 <!-- SLIDE 1 -->
                 <li data-transition="curtain-1" data-slotamount="5" data-masterspeed="700" data-title="Slide 1">
                     <!-- MAIN IMAGE -->
                     <img src="yourIMGhere.jpg" 
                     alt="slidebg1" data-bgfit="cover" 
                     data-bgposition="center center" 
                     data-bgrepeat="no-repeat">

                     <!-- LAYERS -->
                     <div class="tp-caption rs-caption-1 sft start"
                     data-x="center"
                     data-hoffset="0"
                     data-y="100"
                     data-speed="800"
                     data-start="2000"
                     data-easing="Back.easeInOut"
                     data-endspeed="300">
                     <u>TEXT PLACED HERE FOR FIRST LAYER</u>
                 </div>

                 <!-- LAYER -->
                 <div class="tp-caption rs-caption-2 sft"
                 data-x="center"
                 data-hoffset="0"
                 data-y="200"
                 data-speed="1000"
                 data-start="3000"
                 data-easing="Power4.easeOut"
                 data-endspeed="300"
                 data-endeasing="Power1.easeIn"
                 data-captionhidden="off"
                 style="z-index: 6">
                 ADD A SECOND LAYER OF TEXT HERE THAT COMES IN AT NEW TIME
             </div>

             <!-- LAYER -->
             <div class="tp-caption rs-caption-3 sft"
             data-x="center"
             data-hoffset="0"
             data-y="360"
             data-speed="800"
             data-start="3500"
             data-easing="Power4.easeOut"
             data-endspeed="300"
             data-endeasing="Power1.easeIn"
             data-captionhidden="off"
             style="z-index: 6">
             THIRD LAYER HERE AND SO ON... 
         </div>
     </li>

显然可以根据您的需要调整每个图层的设置,但这是如何添加多个不同时间出现的图层...希望有所帮助