Hello, I have recently finished the learngrav tutorials and I am now working on my website. I am quite new to the developing world, so I guess the issue i am facing is a lack of PHP knowledge.
I would like to implement the Jquery Slider revolution plugin into Grav.
This is the slider code:
— html
<div id="rev_slider_206_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="creative-freedom" style="background-color:#1f1d24;padding:0px;">
<!-- START REVOLUTION SLIDER 5.1.1RC fullscreen mode -->
<div id="rev_slider_206_1" class="rev_slider fullscreenbanner" style="display:none;" data-version="5.1.1RC">
<ul>
<!-- SLIDE -->
<li data-index="rs-688" data-transition="fadethroughdark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="2000" data-thumb="../../assets/images/Sail-Away-100x50.jpg" data-rotate="0" data-saveperformance="off" data-title= "Creative" data-param1="01" data-description="">
<!-- MAIN IMAGE -->
<img src="../../assets/images/Sail-Away.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="3" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- BACKGROUND VIDEO LAYER -->
<div class="rs-background-video-layer" data-forcerewind="on" data-volume="mute" data-videowidth="100%" data-videoheight="100%" data-videomp4="../../assets/videos/Sail-Away.mp4" data-videopreload="preload" data-videoloop="loop" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true"></div>
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-tobggroup" id="slide-688-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontweight="['100','100','400','400']" data-width="full" data-height="full" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="opacity:0;s:1500;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1500;e:Power2.easeInOut;s:1500;e:Power 2.easeInOut;" data-start="150" data-basealign="slide" data-responsive_offset="off" data-responsive="off" style="z-index: 5;background-color:rgba(18, 12, 20, 0.75);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-688-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-178','-178','-168','-141']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="1500" data-responsive_offset="on" data-responsive="off" style="z-index: 6;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption Creative-SubTitle tp-resizeme rs-parallaxlevel-2" id="slide-688-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-91','-91','-81','-64']" data-fontsize="['14','14','14','12']" data-lineheight="['14','14','14','12']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2350" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 7; white-space: nowrap;text-align:center;">WITH SLIDER REVOLUTION YOU WILL
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption Creative-Title tp-resizeme rs-parallaxlevel-1" id="slide-688-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-10']" data-fontsize="['70','70','50','40']" data-lineheight="['70','70','55','45']" data-width="['none','none','none','320']" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2550" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 8; white-space: nowrap;text-align:center;">Experience
<br/> Creative Freedom
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-688-layer-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['137','137','119','100']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[-100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="2900" data-responsive_offset="on" data-responsive="off" style="z-index: 9;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption Creative-Button rev-btn rs-parallaxlevel-15" id="slide-688-layer-6" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']" data-voffset="['694','611','689','540']" data-fontweight="['400','500','500','500']" 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:Power1.easeInOut; " data-style_hover="c:rgba(205, 176, 131, 1.00);bc:rgba(205, 176, 131, 1.00);cursor:pointer;" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacit y:0;s:1500;e:Power2.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;s kY:0;opacity:0;s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-start="3850" data-splitin="none" data-splitout="none" data-actions='[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]' data-responsive_offset="on" data-responsive="off" style="z-index: 10; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-siz ing:border-box;-webkit-box-sizing:border-box;">CONTINUE THE JOURNEY
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-689" data-transition="fadethroughdark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="2000" data-thumb="../../assets/images/creative_bg1-100x50.jpg" data-rotate="0" data-saveperformance="off" data-title="Quality" data-param1="02" data-description="">
<!-- MAIN IMAGE -->
<img src="../../assets/images/creative_bg1.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="3" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-tobggroup" id="slide-689-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="full" data-height="full" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="opacity:0;s:1500;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1500;e:Power2.easeInOut;s:1500;e:Power 2.easeInOut;" data-start="150" data-basealign="slide" data-responsive_offset="off" data-responsive="off" style="z-index: 5;background-color:rgba(18, 12, 20, 0.75);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-689-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-178','-178','-168','-141']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="1500" data-responsive_offset="on" data-responsive="off" style="z-index: 6;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption Creative-SubTitle tp-resizeme rs-parallaxlevel-2" id="slide-689-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-91','-91','-81','-64']" data-fontsize="['14','14','14','12']" data-lineheight="['14','14','14','12']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2350" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 7; white-space: nowrap;text-align:center;">OPTIMIZED FOR MOBILE DEVICES
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption Creative-Title tp-resizeme rs-parallaxlevel-1" id="slide-689-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-10']" data-fontsize="['70','70','50','40']" data-lineheight="['70','70','55','45']" data-width="['none','none','none','320']" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2550" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 8; white-space: nowrap;text-align:center;">Quality Web
<br/> Presentations
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-689-layer-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['137','137','119','100']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[-100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="2900" data-responsive_offset="on" data-responsive="off" style="z-index: 9;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption Creative-Button rev-btn rs-parallaxlevel-15" id="slide-689-layer-6" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']" data-voffset="['694','611','689','540']" data-fontweight="['400','500','500','500']" 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:Power1.easeInOut; " data-style_hover="c:rgba(205, 176, 131, 1.00);bc:rgba(205, 176, 131, 1.00);cursor:pointer;" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacit y:0;s:1500;e:Power2.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;s kY:0;opacity:0;s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-start="3850" data-splitin="none" data-splitout="none" data-actions='[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]' data-responsive_offset="on" data-responsive="off" style="z-index: 10; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-siz ing:border-box;-webkit-box-sizing:border-box;">CONTINUE THE JOURNEY
</div>
</li>
<!-- SLIDE -->
<li data-index="rs-690" data-transition="fadethroughdark" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="2000" data-thumb="../../assets/images/icebg-100x50.jpg" data-rotate="0" data-saveperformance="off" data-title="Concept" data-param1="03" data-description="">
<!-- MAIN IMAGE -->
<img src="../../assets/images/icebg.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="3" class="rev-slidebg" data-no-retina>
<!-- LAYERS -->
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-tobggroup" id="slide-690-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-width="full" data-height="full" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="opacity:0;s:1500;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1500;e:Power2.easeInOut;s:1500;e:Power 2.easeInOut;" data-start="150" data-basealign="slide" data-responsive_offset="off" data-responsive="off" style="z-index: 5;background-color:rgba(18, 12, 20, 0.75);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-690-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-178','-178','-168','-141']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="1500" data-responsive_offset="on" data-responsive="off" style="z-index: 6;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption Creative-SubTitle tp-resizeme rs-parallaxlevel-2" id="slide-690-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-91','-91','-81','-64']" data-fontsize="['14','14','14','12']" data-lineheight="['14','14','14','12']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2350" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 7; white-space: nowrap;text-align:center;">EXPLORE NEW CONCEPT WORLDS
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption Creative-Title tp-resizeme rs-parallaxlevel-1" id="slide-690-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-10']" data-fontsize="['70','70','50','40']" data-lineheight="['70','70','55','45']" data-width="['none','none','none','320']" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2550" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 8; white-space: nowrap;text-align:center;">Groundbreaking
<br/> Technology
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-690-layer-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['137','137','119','100']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[-100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="2900" data-responsive_offset="on" data-responsive="off" style="z-index: 9;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption Creative-Button rev-btn rs-parallaxlevel-15" id="slide-690-layer-6" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']" data-voffset="['694','611','689','540']" data-fontweight="['400','500','500','500']" 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:Power1.easeInOut; " data-style_hover="c:rgba(205, 176, 131, 1.00);bc:rgba(205, 176, 131, 1.00);cursor:pointer;" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacit y:0;s:1500;e:Power2.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;s kY:0;opacity:0;s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-start="3850" data-splitin="none" data-splitout="none" data-actions='[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]' data-responsive_offset="on" data-responsive="off" style="z-index: 10; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-siz ing:border-box;-webkit-box-sizing:border-box;">BACK TO THE FIRST SLIDE
</div>
</li>
</ul>
<div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
</div>
</div>
<!-- END REVOLUTION SLIDER -->
<script type="text/javascript">
var tpj = jQuery;
var revapi206;
tpj(document).ready(function() {
if (tpj("#rev_slider_206_1").revolution == undefined) {
revslider_showDoubleJqueryError("#rev_slider_206_1");
} else {
revapi206 = tpj("#rev_slider_206_1").show().revolution({
sliderType: "standard",
jsFileLocation: "//server.local/revslider/wp-content/plugins/revslider/public/assets/js/",
sliderLayout: "fullscreen",
dottedOverlay: "none",
delay: 9000,
navigation: {
keyboardNavigation: "off",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 50,
swipe_direction: "horizontal",
drag_block_vertical: false
},
tabs: {
style: "metis",
enable: true,
width: 250,
height: 40,
min_width: 249,
wrapper_padding: 0,
wrapper_color: "",
wrapper_opacity: "0",
tmp: '<div class="tp-tab-wrapper"><div class="tp-tab-number">{{param1}}</div><div class="tp-tab-divider"></div><div class="tp-tab-title-mask"><div class="tp-tab-title">{{title}}</div></div></div>',
visibleAmount: 5,
hide_onmobile: true,
hide_under: 800,
hide_onleave: false,
hide_delay: 200,
direction: "vertical",
span: true,
position: "inner",
space: 0,
h_align: "left",
v_align: "center",
h_offset: 0,
v_offset: 0
}
},
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
parallax: {
type: "3D",
origo: "slidercenter",
speed: 1000,
levels: [2, 4, 6, 8, 10, 12, 14, 16, 45, 50, 47, 48, 49, 50, 0, 50],
type: "3D",
ddd_shadow: "off",
ddd_bgfreeze: "on",
ddd_overflow: "hidden",
ddd_layer_overflow: "visible",
ddd_z_correction: 100,
},
spinner: "off",
stopLoop: "on",
stopAfterLoops: 0,
stopAtSlide: 1,
shuffle: "off",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "60px",
disableProgressBar: "on",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
simplifyAll: "off",
nextSlideOnWindowFocus: "off",
disableFocusListener: false,
}
});
}
}); /*ready*/
</script>
</article>
</section>
I can see that the showcase.html.twig from Deliver skeleton has the following code:
--- html
<div id="content-slide">
<div class="slideme">
{% for slide in page.header.slides %}
<div class="modular-row showcase flush-top" {% if page.media[slide.image] %}style="background-image: url({{ page.media[slide.image].url }});"{% endif %}>
<h1>{{ slide.heading }}</h1>
<h2>{{ slide.subheading }}</h2>
<a class="button" href="{{ slide.button_url }}">{{ slide.button_text }}</a>
</div>
{% endfor %}
</div>
</div>
{{ content }}
<script type="text/javascript">
$('#content-slide').slideme({
arrows: {{ site.header_options.arrows }},
autoslide: {{ site.header_options.autoslide }},
autoslideHoverStop: {{ site.header_options.autoslideHoverStop }},
interval: {{ site.header_options.interval }},
loop: {{ site.header_options.loop }},
pagination: "numbers",
transition : '{{ site.header_options.transition }}',
itemsForSlide: {{ site.header_options.itemsForSlide }},
touch: {{ site.header_options.touch }},
swipe: {{ site.header_options.swipe }},
});
</script>
I can see that Deliver is using a for loop and each image is being inputed. For the slider revolution to have specific variables would I use something like this?
— html
<!-- BACKGROUND VIDEO LAYER -->
<div class="rs-background-video-layer" data-forcerewind="on" data-volume="mute" data-videowidth="100%" data-videoheight="100%" data-videomp4="page.media[slide1.video].url" data-videopreload="preload" data-videoloop="loop" data-autoplay="true" data-autoplayonlyfirsttime="false" data-nextslideatend="true"></div>
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-tobggroup" id="slide-688-layer-1" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']" data-fontweight="['100','100','400','400']" data-width="full" data-height="full" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="opacity:0;s:1500;e:Power2.easeInOut;" data-transform_out="opacity:0;s:1500;e:Power2.easeInOut;s:1500;e:Power 2.easeInOut;" data-start="150" data-basealign="slide" data-responsive_offset="off" data-responsive="off" style="z-index: 5;background-color:rgba(18, 12, 20, 0.75);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-688-layer-4" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-178','-178','-168','-141']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="1500" data-responsive_offset="on" data-responsive="off" style="z-index: 6;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption Creative-SubTitle tp-resizeme rs-parallaxlevel-2" id="slide-688-layer-3" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-91','-91','-81','-64']" data-fontsize="['14','14','14','12']" data-lineheight="['14','14','14','12']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2350" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 7; white-space: nowrap;text-align:center;"><h2>{{ slide1.subheading }}</h2>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption Creative-Title tp-resizeme rs-parallaxlevel-1" id="slide-688-layer-2" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-10']" data-fontsize="['70','70','50','40']" data-lineheight="['70','70','55','45']" data-width="['none','none','none','320']" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY :0;opacity:0;s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;" data-start="2550" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 8; white-space: nowrap;text-align:center;"><h1>{{ slide1.heading }}</h1>
</div>
<!-- LAYER NR. 5 -->
<div class="tp-caption tp-shape tp-shapewrapper rs-parallaxlevel-3" id="slide-688-layer-5" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['middle','middle','middle','middle']" data-voffset="['137','137','119','100']" data-width="1" data-height="100" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;s:1500;e:Power3.easeInOut;" data-transform_out="y:[-100%];s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" data-start="2900" data-responsive_offset="on" data-responsive="off" style="z-index: 9;background-color:rgba(205, 176, 131, 1.00);border-color:rgba(0, 0, 0, 0);">
</div>
<!-- LAYER NR. 6 -->
<div class="tp-caption Creative-Button rev-btn rs-parallaxlevel-15" id="slide-688-layer-6" data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']" data-y="['top','top','top','top']" data-voffset="['694','611','689','540']" data-fontweight="['400','500','500','500']" 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:Power1.easeInOut; " data-style_hover="c:rgba(205, 176, 131, 1.00);bc:rgba(205, 176, 131, 1.00);cursor:pointer;" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacit y:0;s:1500;e:Power2.easeOut;" data-transform_out="x:0;y:0;z:0;rX:0;rY:0;rZ:0;sX:0.75;sY:0.75;skX:0;s kY:0;opacity:0;s:500;e:Power1.easeIn;s:500;e:Power1.easeIn;" data-start="3850" data-splitin="none" data-splitout="none" data-actions='[{"event":"click","action":"jumptoslide","slide":"next","delay":""}]' data-responsive_offset="on" data-responsive="off" style="z-index: 10; white-space: nowrap;outline:none;box-shadow:none;box-sizing:border-box;-moz-box-siz ing:border-box;-webkit-box-sizing:border-box;"><h2>{{ slide1.btn-text }}</h2>
</div>
</li>
My markdown file to look like this :
title: Slider
menu: Top
slide1:
- image: Sail-Away.jpg
video: Sail-Away.mp4
heading: Experience<br/> Creative Freedom
subheading: WITH SLIDER REVOLUTION YOU WILL
btn-text: CONTINUE THE JOURNEY
Is that how it is done in regards to creating page.slide1 varaible with the headings or the headings should use {% page.slide1.heading %} as It is not in a for loop?