Canvas Support

Add extra slide

4 replies·opened Oct 24, 2019
S
stephnisimOct 24, 2019

Hi Canvas Support,

Hope you have a great day.

I have came across a very nice template from you which is the http://themes.semicolonweb.com/html/canvas/rs-demo-web-product-light.html , May i know how should i add 1 extra slide and 1 extra "Menu navigation". It is really beautiful, i just need to add in 1 more slide for extra information.

Thank You Canvas Support.

S
stephnisimOct 25, 2019

Hi canvas Support,

Do i need to install slider revolution to add one more slide? I have tried reading through the documents and link but i dont really understand where to get the jquery install. May i know does that mean i have to purchase it from code canyon before using it?

Thank You Canvas Support.

S
SemiColonWebSTAFFOct 27, 2019

Hello,

  1. Simply use the following code to add Extra Slides:
<!-- SLIDE  -->
<li data-index="rs-251" data-transition="slidevertical" data-slotamount="1"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb="include/rs-plugin/demos/assets/images/express_bglight-100x50.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="Intro" data-description="">
	<!-- MAIN IMAGE -->
	<img src="include/rs-plugin/demos/assets/images/express_bglight.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
	<!-- LAYERS -->

	<!-- LAYER NR. 1 -->
	<div class="tp-caption   tp-resizeme"
		 id="slide-251-layer-1"
		 data-x="['right','right','center','center']" data-hoffset="['-254','-453','70','60']"
		 data-y="['middle','middle','middle','bottom']" data-voffset="['50','50','211','25']"
					data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="x:right;s:1500;e:Power3.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="2500"
		data-responsive_offset="on"

		style="z-index: 5;"><img src="include/rs-plugin/demos/assets/images/macbookpro.png" alt="" width="1000" height="600" data-ww="['1000px','1000px','500px','350px']" data-hh="['600px','600px','300px','210px']" data-no-retina>
	</div>

	<!-- LAYER NR. 2 -->
	<div class="tp-caption   tp-resizeme"
		 id="slide-251-layer-2"
		 data-x="['left','left','center','center']" data-hoffset="['828','865','70','60']"
		 data-y="['top','top','top','bottom']" data-voffset="['266','216','580','63']"
					data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		 data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
		data-start="3350"
		data-responsive_offset="on"

		style="z-index: 6;"><img src="include/rs-plugin/demos/assets/images/express_macbook_content1.jpg" alt="" width="653" height="408" data-ww="['653px','653px','330px','230px']" data-hh="['408px','408px','206px','144px']" data-no-retina>
	</div>

	<!-- LAYER NR. 3 -->
	<div class="tp-caption   tp-resizeme"
		 id="slide-251-layer-3"
		 data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']"
		 data-y="['top','top','top','bottom']" data-voffset="['253','203','590','20']"
					data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="x:right;s:1500;e:Power3.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="2750"
		data-responsive_offset="on"

		style="z-index: 7;"><img src="include/rs-plugin/demos/assets/images/ipad.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
	</div>

	<!-- LAYER NR. 4 -->
	<div class="tp-caption   tp-resizeme"
		 id="slide-251-layer-4"
		 data-x="['left','left','left','center']" data-hoffset="['663','703','212','-60']"
		 data-y="['top','top','top','bottom']" data-voffset="['341','291','632','50']"
					data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		 data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
		data-start="3700"
		data-responsive_offset="on"

		style="z-index: 8;"><img src="include/rs-plugin/demos/assets/images/express_ipad_content1.jpg" alt="" width="290" height="374" data-ww="['290px','290px','135px','115px']" data-hh="['374px','374px','174px','148px']" data-no-retina>
	</div>

	<!-- LAYER NR. 5 -->
	<div class="tp-caption   tp-resizeme"
		 id="slide-251-layer-5"
		 data-x="['left','left','left','left']" data-hoffset="['530','553','127','58']"
		 data-y="['top','top','top','top']" data-voffset="['348','297','622','529']"
					data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="x:right;s:1500;e:Power3.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="3000"
		data-responsive_offset="on"

		style="z-index: 9;"><img src="include/rs-plugin/demos/assets/images/ihpone.png" alt="" width="260" height="450" data-ww="['260px','260px','130px','100px']" data-hh="['450px','450px','225px','173px']" data-no-retina>
	</div>

	<!-- LAYER NR. 6 -->
	<div class="tp-caption   tp-resizeme"
		 id="slide-251-layer-6"
		 data-x="['left','left','left','left']" data-hoffset="['576','598','150','75']"
		 data-y="['top','top','top','top']" data-voffset="['431','379','663','560']"
					data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		 data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
		data-start="3950"
		data-responsive_offset="on"

		style="z-index: 10;"><img src="include/rs-plugin/demos/assets/images/express_iphone_content1.jpg" alt="" width="170" height="286" data-ww="['170px','170px','85px','66px']" data-hh="['286px','286px','143px','111px']" data-no-retina>
	</div>

	<!-- LAYER NR. 7 -->
	<div class="tp-caption WebProduct-Title   tp-resizeme"
		 id="slide-251-layer-7"
		 data-x="['left','left','left','left']" data-hoffset="['30','30','200','80']"
		 data-y="['middle','middle','top','top']" data-voffset="['-80','-80','137','130']"
					data-fontsize="['90','90','75','75']"
		data-lineheight="['90','90','75','70']"
		data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="x:-50px;opacity:0;s:1000;e:Power2.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="1000"
		data-splitin="none"
		data-splitout="none"
		data-responsive_offset="on"

		style="z-index: 11; white-space: nowrap;">Beautiful<br>Websites
	</div>

	<!-- LAYER NR. 8 -->
	<div class="tp-caption WebProduct-SubTitle   tp-resizeme"
		 id="slide-251-layer-10"
		 data-x="['left','left','left','left']" data-hoffset="['30','30','200','80']"
		 data-y="['middle','middle','top','top']" data-voffset="['44','44','294','277']"
					data-fontsize="['15','15','15','13']"
		data-width="none"
		data-height="none"
		data-whitespace="nowrap"
		data-transform_idle="o:1;"

		 data-transform_in="x:-50px;opacity:0;s:1000;e:Power2.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="1250"
		data-splitin="none"
		data-splitout="none"
		data-responsive_offset="on"

		style="z-index: 12; white-space: nowrap;letter-spacing:2px;font-weight:500;">WORDPRESS / HTML & CSS / JQUERY
	</div>

	<!-- LAYER NR. 9 -->
	<div class="tp-caption WebProduct-Content   tp-resizeme"
		 id="slide-251-layer-9"
		 data-x="['left','left','left','left']" data-hoffset="['30','30','200','80']"
		 data-y="['middle','middle','top','top']" data-voffset="['129','127','345','316']"
					data-fontsize="['16','16','16','14']"
		data-lineheight="['24','24','24','22']"
		data-width="['448','356','334','277']"
		data-height="['none','none','76','68']"
		data-whitespace="normal"
		data-transform_idle="o:1;"

		 data-transform_in="x:-50px;opacity:0;s:1000;e:Power2.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="1500"
		data-splitin="none"
		data-splitout="none"
		data-responsive_offset="on"

		style="z-index: 13; min-width: 448px; max-width: 448px; white-space: normal;">Our portfolio includes some of the most prominent clients.<br>
You can be a part now!
	</div>

	<!-- LAYER NR. 10 -->
	<div class="tp-caption rev-btn rev-btn "
		 id="slide-251-layer-8"
		 data-x="['left','left','left','left']" data-hoffset="['30','30','200','80']"
		 data-y="['middle','middle','top','top']" data-voffset="['268','268','456','420']"
					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:300;e:Linear.easeNone;"
			data-style_hover="c:rgba(51, 51, 51, 1.00);bg:rgba(255, 255, 255, 1.00);"

		 data-transform_in="x:-50px;opacity:0;s:1000;e:Power2.easeOut;"
		 data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;"
		data-start="1750"
		data-splitin="none"
		data-splitout="none"
		data-actions='[{"event":"click","action":"jumptoslide","slide":"rs-252","delay":""}]'
		data-responsive_offset="on"
		data-responsive="off"

		style="z-index: 14; white-space: nowrap; font-size: 16px; line-height: 48px; font-weight: 600; color: rgba(255, 255, 255, 1.00);font-family:Raleway;background-color:rgba(51, 51, 51, 1.00);padding:0px 40px 0px 40px;border-color:rgba(0, 0, 0, 1.00);border-width:2px;letter-spacing:1px;color: #FFF;">GET STARTED TODAY
	</div>
</li>

Simply make sure that you change the data-index="rs-251" and data-title="Intro" to a different Values according to your needs. For complete Documentation on Revolution Slider, please check the Official Documentation: https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/ .

  1. The Revolution Slider Visual Editor is already included with Canvas by default, so you do not need to Purchase an Additional License. Please download it here: https://drive.google.com/uc?export=download&confirm=TTLI&id=0B8_nVncz0cF0Nkk0U3Zaa2liWE0 and check the Documentation here: https://revolution.themepunch.com/visual_editor/documentation/ .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

S
stephnisimOct 28, 2019

Hi Canvas Support,

Thank You very much for your reply.

I have find out i need php for revolution slider. I have done installing and editing the slides.

Appreciate for your help.

S
SemiColonWebSTAFFOct 31, 2019

Hello,

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

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