Hello its me again,
How can I add a fourth slide to the slider? it might sound like a dumb question but I tried replicating one of the existing ones and it didn't work. It shows its content (layers) but it doesn't show the static layers.
Thanks in advance for your help
Hello,
You will need to change the ID of the Layers and the data-index of the Slide to a unique one. Consider adding the following code as your Fourth Slide:
<!-- SLIDE -->
<li data-index="rs-25" data-transition="scaledownfrombottom" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="1500" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
<!-- MAIN IMAGE -->
<img src="include/rs-plugin/demos/assets/images/dummy.png" alt="Image" data-lazyload="include/rs-plugin/demos/assets/images/city_bg.jpg" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="7" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-7"
id="slide-2-25-layer-1"
data-x="['center','center','center','center']" data-hoffset="['171','301','0','0']"
data-y="['top','top','top','top']" data-voffset="['125','105','220','130']"
data-width="['340','600','600','400']"
data-height="['700','330','330','240']"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;sX:1;sY:1;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="500"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 5;background-color:rgba(255, 255, 255, 1.00);border-color:rgba(0, 0, 0, 0);"> </div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-4"
id="slide-2-25-layer-2"
data-x="['center','center','center','center']" data-hoffset="['146','97','-214','-165']"
data-y="['top','top','top','top']" data-voffset="['144','113','229','138']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="500"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 6;"><img src="include/rs-plugin/demos/assets/images/dummy.png" alt="Image" data-ww="['250px','250px','250px','180px']" data-hh="['313px','313px','313px','225px']" data-lazyload="include/rs-plugin/demos/assets/images/iphone_big-1.png" data-no-retina> </div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-4"
id="slide-2-25-layer-6"
data-x="['center','center','center','center']" data-hoffset="['171','122','-189','-147']"
data-y="['top','top','top','top']" data-voffset="['209','178','294','185']"
data-width="['100','100','100','72']"
data-height="['183','183','183','131']"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1600;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="500"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 7;background-color:rgba(138, 0, 255, 1.00);border-color:rgba(0, 0, 0, 0);"> </div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-4"
id="slide-2-25-layer-7"
data-x="['center','center','center','center']" data-hoffset="['171','122','-189','-147']"
data-y="['top','top','top','top']" data-voffset="['269','240','361','234']"
data-fontsize="['50','50','40','30']"
data-lineheight="['50','50','40','30']"
data-width="['90','90','90','80']"
data-height="none"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1600;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="500"
data-splitin="none"
data-splitout="none"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 8; min-width: 90px; max-width: 90px; white-space: normal; font-size: 50px; line-height: 50px; font-weight: 900; color: rgba(255, 255, 255, 1.00);text-align:center;"><i class="icon-cubes"></i> </div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-7"
id="slide-2-25-layer-3"
data-x="['center','center','center','center']" data-hoffset="['170','382','68','51']"
data-y="['top','top','top','top']" data-voffset="['529','183','297','158']"
data-fontsize="['20','20','20','15']"
data-lineheight="['20','20','20','15']"
data-width="['240','320','320','260']"
data-height="none"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="650"
data-splitin="none"
data-splitout="none"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 9; min-width: 240px; max-width: 240px; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 900; color: rgba(0, 0, 0, 1.00);font-family:Raleway;">ADD-ONS ARE AVAILALBE AND FREE FOR OUR CUSTOMERS </div>
<!-- LAYER NR. 6 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-7"
id="slide-2-25-layer-4"
data-x="['center','center','center','center']" data-hoffset="['171','382','68','51']"
data-y="['top','top','top','top']" data-voffset="['607','241','356','201']"
data-fontsize="['15','15','14','14']"
data-lineheight="['23','23','20','20']"
data-width="['240','320','320','260']"
data-height="none"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="650"
data-splitin="none"
data-splitout="none"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 10; min-width: 240px; max-width: 240px; white-space: normal; font-size: 15px; line-height: 23px; font-weight: 400; color: rgba(153, 153, 153, 1.00);font-family:arial;">Another benefit of buying a Slider Revolution license is our every-growing library of add-ons which add more cool functionality. </div>
<!-- LAYER NR. 7 -->
<a class="tp-caption TechJournal-Button rev-btn tp-resizeme rs-parallaxlevel-7" href="https://goo.gl/WqXjZB" target="_blank" id="slide-2-25-layer-5" data-x="['center','center','center','center']" data-hoffset="['140','313','-2','10']" data-y="['top','top','top','top']" data-voffset="['723','334','441','296']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:200;e:Power1.easeInOut;" data-style_hover="c:rgba(0, 0, 0, 1.00);bg:rgba(229, 229, 229, 1.00);" data-transform_in="y:bottom;s:1500;e:Power4.easeOut;" data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;" data-start="650" data-splitin="none" data-splitout="none" data-actions='' data-basealign="slide" data-responsive_offset="on" style="z-index: 11; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;" rel="noopener">HOOK ME UP! </a>
<!-- LAYER NR. 8 -->
<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme rs-parallaxlevel-7"
id="slide-25-layer-1"
data-x="['center','center','center','center']" data-hoffset="['531','146','-155','0']"
data-y="['top','top','top','top']" data-voffset="['125','455','570','380']"
data-width="['340','290','290','400']"
data-height="['340','290','290','220']"
data-whitespace="nowrap"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="750"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 12;background-color:rgba(255, 255, 255, 1.00);border-color:rgba(0, 0, 0, 0);"> </div>
<!-- LAYER NR. 9 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-7"
id="slide-25-layer-3"
data-x="['center','center','center','center']" data-hoffset="['531','146','-155','0']"
data-y="['top','top','top','top']" data-voffset="['192','482','597','409']"
data-fontsize="['20','20','20','15']"
data-lineheight="['20','20','20','15']"
data-width="['240','230','230','340']"
data-height="none"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="750"
data-splitin="none"
data-splitout="none"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 13; min-width: 240px; max-width: 240px; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 900; color: rgba(0, 0, 0, 1.00);font-family:Raleway;">WHAT ARE YOU WAITING FOR? </div>
<!-- LAYER NR. 10 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-7"
id="slide-25-layer-4"
data-x="['center','center','center','center']" data-hoffset="['530','146','-155','0']"
data-y="['top','top','top','top']" data-voffset="['250','533','656','452']"
data-fontsize="['15','15','14','14']"
data-lineheight="['23','23','20','20']"
data-width="['240','230','230','340']"
data-height="none"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="750"
data-splitin="none"
data-splitout="none"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 14; min-width: 240px; max-width: 240px; white-space: normal; font-size: 15px; line-height: 23px; font-weight: 400; color: rgba(153, 153, 153, 1.00);font-family:arial;">More than 1,500,000 Slider Revolution users world-wide love the immense variety and endless possibilities. </div>
<!-- LAYER NR. 11 -->
<a class="tp-caption TechJournal-Button rev-btn tp-resizeme rs-parallaxlevel-7" href="https://goo.gl/WqXjZB" target="_blank" id="slide-25-layer-5" data-x="['center','center','center','center']" data-hoffset="['497','117','-184','-84']" data-y="['top','top','top','top']" data-voffset="['366','662','761','527']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:200;e:Power1.easeInOut;" data-style_hover="c:rgba(0, 0, 0, 1.00);bg:rgba(229, 229, 229, 1.00);" data-transform_in="y:bottom;s:1500;e:Power4.easeOut;" data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;" data-start="750" data-splitin="none" data-splitout="none" data-actions='' data-basealign="slide" data-responsive_offset="on" style="z-index: 15; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;" rel="noopener">LEARN MORE </a>
<!-- LAYER NR. 12 -->
<div class="tp-caption tp-resizeme rs-parallaxlevel-7"
id="slide-25-layer-8"
data-x="['center','center','center','center']" data-hoffset="['531','456','155','431']"
data-y="['top','top','top','top']" data-voffset="['485','455','570','398']"
data-width="none"
data-height="none"
data-whitespace="nowrap"
data-visibility="['on','on','on','off']"
data-transform_idle="o:1;"
data-transform_in="y:bottom;s:1500;e:Power4.easeOut;"
data-transform_out="y:-70px;opacity:0;s:1000;e:Power4.easeInOut;"
data-start="1000"
data-basealign="slide"
data-responsive_offset="on"
style="z-index: 16;"><img src="include/rs-plugin/demos/assets/images/dummy.png" alt="Image" data-ww="['340px','290px','290px','290px']" data-hh="['340px','290px','290px','290px']" data-lazyload="include/rs-plugin/demos/assets/images/iwatch_smallimage.jpg" data-no-retina> </div>
</li>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
Yes, that's exactly what I did but, and here's the issue, that creates a new slide but for some reason, the LAYERS inside <div class="tp-static-layers"> won't show except for the one rendering the down arrow. let me show you...
https://drive.google.com/file/d/1EbJbRX-XhCSp2COvI6WlfJKMn1Bvt5jj/view?usp=sharing
Hello,
Simply change the data-endslide="2" to data-endslide="3" for the Static Layers. This will ensure that the Static Layers are available for the fourth slide. Similarly, if you plan to increase the Slide Number, you will also need to increase the data-endslide value.
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard