<section class="splitter splitter_bg-color_white splitter_padding_bottom_small ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="slider-highlight">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="slide-highlight swiper-slide">
<div class="wrap-img">
<picture>
<source srcset="/dist/images/slider-767.jpg" media="(max-width:767px)" />
<source srcset="/dist/images/slider-768.jpg" media="(max-width:768px)" />
<source srcset="/dist/images/slider-1024.jpg" media="(max-width:1024px)" />
<img src="/dist/images/slider-desktop.jpg" />
</picture>
</div>
<div class="
slide-highlight__tile
slide-highlight__tile_reversed
slide-highlight__tile_accent-dark
">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-right-1 col-md-6 col-lg-6 col">
<div class="tile-highlight">
<div class="tile-highlight__wrapper">
<div class="tile-highlight__content">
<div class="tile-highlight__label">
<div class="text-label-m text-label-m_color_light">¿No Vives en Espana y quieres comprar aquí?</div>
</div>
<div class="tile-highlight__title tile-highlight__title_header">
<h1 class="
title-xl title-xl_color_light
">Ejemplo de slide con texto e imagen</h1>
</div>
<div class="tile-highlight__bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa. Hola que taaaaal. ¡Holi!.</p>
</div>
</div>
<div class="tile-highlight__btn">
<a class="btn
" href="#" id="">
Solicita tu hipoteca
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-highlight swiper-slide">
<div class="wrap-img">
<picture>
<source srcset="/dist/images/slider-767.jpg" media="(max-width:767px)" />
<source srcset="/dist/images/slider-768.jpg" media="(max-width:768px)" />
<source srcset="/dist/images/slider-1024.jpg" media="(max-width:1024px)" />
<img src="/dist/images/slider-desktop.jpg" />
</picture>
</div>
<div class="
slide-highlight__tile
slide-highlight__tile_reversed
">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-right-1 col-md-6 col-lg-6 col">
<div class="tile-highlight">
<div class="tile-highlight__wrapper">
<div class="tile-highlight__content">
<div class="tile-highlight__label">
<div class="text-label-m text-label-m_color_light">¿No Vives en Espana y quieres comprar aquí?</div>
</div>
<div class="tile-highlight__title tile-highlight__title_header">
<h2 class="
title-xl title-xl_color_light
">Ejemplo con imagen y fondo claro</h2>
</div>
<div class="tile-highlight__bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa. Hola que taaaaal. ¡Holi!.</p>
</div>
</div>
<div class="tile-highlight__btn">
<a class="btn
" href="#" id="">
Solicita tu hipoteca
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-navigation simple simple-left">
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="slider-highlight{{#if isContentInside}} content-inside{{/if}}{{#if isNotOpening}} not-opening{{/if}}">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each slides}}
{{> @slide-highlight this.slide }}
{{/each}}
</div>
{{#if isSimpleRight}}
<div class="swiper-navigation simple simple-right">
<div class="swiper-pagination"></div>
</div>
{{else if isSimpleLeft}}
<div class="swiper-navigation simple simple-left">
<div class="swiper-pagination"></div>
</div>
{{else}}
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--arrow-left' }}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next">
{{ render '@icon--arrow-right' }}
</div>
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomSmall": true
},
"isSimpleRight": false,
"slides": [
{
"slide": {
"isReversed": true,
"isAccentDark": true,
"isImg": true,
"src": "/dist/images/slider-desktop.jpg",
"src1024": "/dist/images/slider-1024.jpg",
"src768": "/dist/images/slider-768.jpg",
"srcmobile": "/dist/images/slider-767.jpg",
"tile-highlight": {
"isHeader": true,
"text-label": {
"text": "¿No Vives en Espana y quieres comprar aquí?",
"colorLight": true
},
"title": {
"text": "Ejemplo de slide con texto e imagen",
"colorLight": true
},
"bodycopy": {
"text": "<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa. Hola que taaaaal. ¡Holi!.</p>",
"colorLight": true
},
"btn": {
"href": "#",
"text": "Solicita tu hipoteca"
}
}
}
},
{
"slide": {
"isReversed": true,
"isAccentDark": false,
"isImg": true,
"src": "/dist/images/slider-desktop.jpg",
"src1024": "/dist/images/slider-1024.jpg",
"src768": "/dist/images/slider-768.jpg",
"srcmobile": "/dist/images/slider-767.jpg",
"tile-highlight": {
"isHeader": true,
"text-label": {
"text": "¿No Vives en Espana y quieres comprar aquí?",
"colorLight": true
},
"title": {
"text": "Ejemplo con imagen y fondo claro",
"colorLight": true,
"isH2": true
},
"bodycopy": {
"text": "<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa. Hola que taaaaal. ¡Holi!.</p>",
"colorLight": true
},
"btn": {
"href": "#",
"text": "Solicita tu hipoteca"
}
}
}
}
],
"isNotOpening": false,
"isSimpleLeft": true
}
.slider-highlight {
background-color: #fff;
position: relative;
margin-top: 100px;
margin-bottom: 20px;
z-index: 0;
@media (--viewport-ms-max) {
margin-top:55px;
}
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -19px;
}
.swiper-container{
@media (--viewport-ms-max) {
padding-bottom:40px;
}
}
.swiper-slide{
background-color:var(--color-white);
}
.swiper-navigation{
max-width: 267px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
position: relative;
&::after {
display: none;
}
.icon {
height: 20px;
width: 28px;
fill:var(--color-accent)
}
}
.swiper-button-next,
.swiper-button-prev {
top: 0;
width: 28px;
height: 20px;
margin-top: 0;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
.swiper-pagination-bullet-active {
background: var(--color-accent);
}
&.simple {
height: auto;
max-width: 267px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom:0;
@media (--viewport-ms-max) {
padding: 20px 20px 0 20px;
}
@media (--viewport-xs-max) {
width: 100%;
max-width:100%;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
position: relative;
&::after {
display: none;
}
.icon {
height: 20px;
width: 28px;
fill:var(--color-accent)
}
}
.swiper-button-next,
.swiper-button-prev {
top: 0;
width: 28px;
height: 20px;
margin-top: 0;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
.swiper-pagination-bullet-active {
background: var(--color-accent);
}
&.simple-right{
right:0;
padding: 20px 0 10px 20px;
}
&.simple-left{
left:0;
padding: 20px 20px 10px 0;
}
}
}
&.content-inside{
.slide-highlight{margin-bottom: 0;display:flex; align-items:center;
.slide-highlight__tile{bottom:auto;margin:0;}
}
}
.tile-highlight__title {
margin-bottom: 0px;
/*margin-bottom: 20px;
@media (--viewport-ms-min) {
margin-bottom: 40px;
}
@media (--viewport-sm-min) {
margin-bottom: 30px;
}*/
}
&.not-opening{margin-top: 0;
.tile-highlight{
&__title {
margin-bottom: 0px;
}
}
}
}
Variantes: Default (isSimpleRight), Reversed (isSimpleLeft), Default not opening page (isSimpleRight), Reversed not opening page (isSimpleLeft), PT (isContentInside and isSimpleRight), PT centered (isContentInside), PT left (isContentInside)