☆ A M B ☆
<div style="z-index: 17; transform: translateX(-1280px); opacity: 1; visibility: hidden;" class="w-slide slide1">
<div class="w-container slide-text-container">
<h2 style="transition: opacity 1000ms ease 0s, transform 1000ms ease 0s; opacity: 1; transform: translateX(0px) translateY(0px);" class="slide-title w-ix-emptyfix" data-ix="fade-down">WE can fix</h2>
<h3 style="transition: opacity 1000ms ease 0s, transform 1000ms ease 0s; opacity: 1; transform: translateX(0px) translateY(0px);" class="slide-subtitle w-ix-emptyfix" data-ix="fade-down-2">All your problems</h3><a style="transition: opacity 1000ms ease 0s, transform 1000ms ease 0s; opacity: 1; transform: translateX(0px) translateY(0px);" class="button slider w-ix-emptyfix" href="#about" data-ix="fade-down-3">discover how</a>
</div>
<div class="slide1-overlay"></div>
</div>[
{"caption":"Slider Text", "fields": [
{"field":"slide_title","caption":"Title"},
{"field":"slide_subtitle","caption":"Subtitle"},
{"field":"slide_button","caption":"Button"}
]}
][
{"header": "Title", "width": "200", "sortable": "true", "dataIndex": "slide_title"},
{"header": "Subtitle", "width": "200", "sortable": "false", "dataIndex": "slide_subtitle"},
{"header": "Button", "width": "200", "sortable": "false", "dataIndex": "slide_button"}
]<div style="z-index: 17; transform: translateX(-1280px); opacity: 1; visibility: hidden;" class="w-slide slide[[+idx]]"> <div class="w-container slide-text-container"> <h2 style="transition: opacity 1000ms ease 0s, transform 1000ms ease 0s; opacity: 1; transform: translateX(0px) translateY(0px);" class="slide-title _[[+idx]] w-ix-emptyfix" data-ix="fade-down">[[+slide_title]]</h2> <h3 style="transition: opacity 1000ms ease 0s, transform 1000ms ease 0s; opacity: 1; transform: translateX(0px) translateY(0px);" class="slide-subtitle _[[+idx]] w-ix-emptyfix" data-ix="fade-down-2">[[+slide_subtitle]]</h3><a style="transition: opacity 1000ms ease 0s, transform 1000ms ease 0s; opacity: 1; transform: translateX(0px) translateY(0px);" class="button slider _[[+idx]] w-ix-emptyfix" href="#about" data-ix="fade-down-3">[[+slide_button]]</a> </div> <div class="slide[[+idx]]-overlay"></div> </div>
<!-- top-->
<div class="w-slider top-slider" id="top" data-animation="cross" data-duration="1500" data-infinite="1" data-delay="6000" data-autoplay="1" data-ix="display-nav">
<div class="w-slider-mask">
[[getImageList? &tvname=`top_slider` &tpl=`top_slider`]]
</div>
<div class="w-slider-arrow-left">
<div class="w-icon-slider-left arrow"></div>
</div>
<div class="w-slider-arrow-right">
<div class="w-icon-slider-right arrow"></div>
</div>
<div class="w-slider-nav w-round">
<div class="w-slider-dot" data-wf-ignore=""></div>
<div class="w-slider-dot w-active" data-wf-ignore=""></div>
<div class="w-slider-dot" data-wf-ignore=""></div>
</div>
</div>
☆ A M B ☆
[[getResources? &parents=`10` &includeContent=`1` &tpl=`@CODE [[+content]]`]]
[[getResources? &parents=`10` &includeContent=`1` &tpl=`@CODE [[+content]]`]]
[[getResources? &parents=`10` &includeContent=`1` &tpl=`@INLINE [[+content]]`]]
[[getResources? &parents=`[[*id]]` &includeContent=`1` &tpl=`@INLINE [[+content]]`]]
For the menus, there is 2 menus, one who appears immediately, and the other one that appear on scroll
they have no ul li, just links a , so i have arranged the visible one adding the links in ul and li (and of course adapting the css) and i'm gonna do it for the second one
to prepar them for wayfinder smiley
is it a good way, or can i let them how they are, and manage everything with wayfinder
for the slider, the images are bg images in the css (same thing for the quotes sections, and for the works section) and i would like to give the ability to my users to change it easily, that's where you talked to me about clientConfig
[
{"caption":"Slider Text", "fields": [
{"field":"slide_title","caption":"Title"},
{"field":"slide_subtitle","caption":"Subtitle"},
{"field":"slide_button","caption":"Button"},
{"field":"image","caption":"Image","inputTVtype":"image"},
]}
][
{"header": "Title", "width": "200", "sortable": "true", "dataIndex": "slide_title"},
{"header": "Subtitle", "width": "200", "sortable": "false", "dataIndex": "slide_subtitle"},
{"header": "Button", "width": "200", "sortable": "false", "dataIndex": "slide_button"},
{"header": "Image", "width": "200", "sortable": "false", "dataIndex": "image","renderer":"this.renderImage"}
]
i don't know how to add a getimageList call to my csswhat does your current CSS (the part where you are defining the bg-images) look like?
i would like to know the meaning of the width: 200 as obviously my images are bigger than 200, but also my title and subtitle
and also the meaning of renderer":"this.renderImage"
{"header": "Image", "width": "200", "sortable": "false", "dataIndex": "image","renderer":"this.renderImage"}
.slide1 {
background-image: url('../images/slider/77H.jpg');
background-position: 0% 1%;
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
}
.slide2 {
background-image: url('../images/slider/unsplash_527e864de3770_1-(1).jpg');
background-position: 0% 62%;
background-size: cover;
background-repeat: no-repeat;
}
.slide3 {
background-image: url('../images/slider/lighthouse.jpg');
background-position: 0% 63%;
background-size: cover;
background-repeat: no-repeat;
}
<style type="text/css"> [[getImageList? &tvname=`top_slider` &tpl=`top_slider_css`]] </style>
.slide[[+idx]] {
background-image: url('../[[+image]]');
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
}background-position: 0% 1%;