<div class="ucipt-higlight-multi-slide">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="ucipt-slide swiper-slide
ucipt-slide__no-margin
">
<div class="ucipt-responsive-bg-image">
<img class="ucipt-responsive-bg-image__img" src="https://www.viajarmiami.com/img/playas-miami.jpg" alt="Dummy Text">
</div>
<div class="ucipt-slide__text-holder
ucipt-slide__no-bottom
">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
<div class="ucipt-slide-highlight">
<div class="ucipt-slide-highlight__wrapper ">
<div class="ucipt-slide-highlight__content">
<div class="ucipt-slide-highlight__content-holder">
<div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
<h1 class="ucipt-title
ucipt-title--color-light">Soy el H1 del slider</h1>
</div>
<div class="ucipt-slide-highlight__bodycopy rich-text">
<div class="
ucipt-description
ucipt-description--color-light
">
UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.
</div>
</div>
<div class="ucipt-slide-highlight__btnholder">
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 1
</a>
</div>
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ucipt-slide swiper-slide
">
<div class="ucipt-responsive-bg-image">
<img class="ucipt-responsive-bg-image__img" src="https://www.viajarmiami.com/img/playas-miami.jpg" alt="Dummy Text">
</div>
<div class="ucipt-slide__text-holder
">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
<div class="ucipt-slide-highlight">
<div class="ucipt-slide-highlight__wrapper bg-accent">
<div class="ucipt-slide-highlight__content">
<div class="ucipt-slide-highlight__content-holder">
<div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
<h2 class="ucipt-title
ucipt-title--color-light">Local para colocar título do banner título do banner</h2>
</div>
<div class="ucipt-slide-highlight__bodycopy rich-text">
<div class="
ucipt-description
ucipt-description--color-light
">
UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.
</div>
</div>
<div class="ucipt-slide-highlight__btnholder">
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 1
</a>
</div>
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ucipt-slide swiper-slide
">
<div class="ucipt-slide__bg-video-holder">
<div class="ucipt-responsive-bg-video">
<video class="ucipt-responsive-bg-video__video " src="https://static.videezy.com/system/resources/previews/000/043/142/original/3prts-2.mp4" muted autoplay loop></video>
<img class="video-bg-image" src="https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw=2300&mh=1105" alt="Dummy Text">
</div>
</div>
<div class="ucipt-slide__text-holder
">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
<div class="ucipt-slide-highlight">
<div class="ucipt-slide-highlight__wrapper bg-accent">
<div class="ucipt-slide-highlight__content">
<div class="ucipt-slide-highlight__content-holder">
<div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
<h2 class="ucipt-title
ucipt-title--color-light">Prueba para vídeo NORMAL</h2>
</div>
<div class="ucipt-slide-highlight__bodycopy rich-text">
<div class="
ucipt-description
ucipt-description--color-light
">
UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.
</div>
</div>
<div class="ucipt-slide-highlight__btnholder">
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 1
</a>
</div>
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ucipt-slide swiper-slide
">
<div class="ucipt-slide__bg-video-holder">
<div class="ucipt-responsive-youtube-video">
<iframe class="ucipt-responsive-youtube-video__iframe" width="730" height="548" src="https://www.youtube.com/embed/gjqI-GBTu6g?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="ucipt-slide__text-holder
">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
<div class="ucipt-slide-highlight">
<div class="ucipt-slide-highlight__wrapper bg-accent">
<div class="ucipt-slide-highlight__content">
<div class="ucipt-slide-highlight__content-holder">
<div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
<h2 class="ucipt-title
ucipt-title--color-light">Prueba para vídeo YOUTUBE</h2>
</div>
<div class="ucipt-slide-highlight__bodycopy rich-text">
<div class="
ucipt-description
ucipt-description--color-light
">
UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.
</div>
</div>
<div class="ucipt-slide-highlight__btnholder">
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 1
</a>
</div>
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ucipt-slide swiper-slide
">
<div class="ucipt-slide__bg-video-holder">
<div class="ucipt-responsive-vimeo-video">
<div class="vimeo-div" style="position:relative;">
<iframe class="ucipt-responsive-vimeo-video__iframe optanon-category-4" src="https://player.vimeo.com/video/642337683?h=675bee2f81?background=1&badge=0&autopause=0&player_id=0&autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js" class="optanon-category-4"></script>
<img class="vimeo-bg-image" src="https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw=2300&mh=1105" alt="Dummy Text">
</div>
</div>
<div class="ucipt-slide__text-holder
">
<div class="row">
<div class="col-xs-12 col-ms-10 col-sm-6 col-sm-offset-1 col-md-5 col-lg-4 col">
<div class="ucipt-slide-highlight">
<div class="ucipt-slide-highlight__wrapper bg-accent">
<div class="ucipt-slide-highlight__content">
<div class="ucipt-slide-highlight__content-holder">
<div class="ucipt-slide-highlight__title ucipt-slide-highlight__title_header">
<h2 class="ucipt-title
ucipt-title--color-light">Prueba para vídeo VIMEOOO</h2>
</div>
<div class="ucipt-slide-highlight__bodycopy rich-text">
<div class="
ucipt-description
ucipt-description--color-light
">
UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.
</div>
</div>
<div class="ucipt-slide-highlight__btnholder">
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 1
</a>
</div>
<div class="ucipt-slide-highlight__btn">
<a class="btn
" href="#" id="">
Local para botão 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="ucipt-higlight-multi-slide">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each slides}}
{{> @ucipt-slide}}
{{/each}}
</div>
<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>
</div>
</div>
{
"hasID": false,
"slides": [
{
"noBackground": true,
"hasBg-color": false,
"bg-image": {
"alt": "Dummy Text",
"url": "https://www.viajarmiami.com/img/playas-miami.jpg"
},
"isReversed": false,
"showHighlight": true,
"title": {
"text": "Soy el H1 del slider",
"colorLight": true,
"isPrincipal": true
},
"description": {
"text": "UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.",
"colorLight": true
},
"buttons": [
{
"href": "#",
"text": "Local para botão 1"
},
{
"href": "#",
"text": "Local para botão 2"
}
]
},
{
"bg-image": {
"alt": "Dummy Text",
"url": "https://www.viajarmiami.com/img/playas-miami.jpg"
},
"isReversed": false,
"showHighlight": true,
"hasBg-color": true,
"bg-color": "bg-accent",
"title": {
"text": "Local para colocar título do banner título do banner",
"colorLight": true
},
"description": {
"text": "UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.",
"colorLight": true
},
"buttons": [
{
"href": "#",
"text": "Local para botão 1"
},
{
"href": "#",
"text": "Local para botão 2"
}
]
},
{
"bg-video-url": "https://static.videezy.com/system/resources/previews/000/043/142/original/3prts-2.mp4",
"isReversed": false,
"showHighlight": true,
"hasBg-color": true,
"bg-color": "bg-accent",
"video-bg": {
"alt": "Dummy Text",
"url": "https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw=2300&mh=1105"
},
"title": {
"text": "Prueba para vídeo NORMAL",
"colorLight": true
},
"description": {
"text": "UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.",
"colorLight": true
},
"buttons": [
{
"href": "#",
"text": "Local para botão 1"
},
{
"href": "#",
"text": "Local para botão 2"
}
]
},
{
"youtube-video-code": "gjqI-GBTu6g",
"isReversed": false,
"showHighlight": true,
"hasBg-color": true,
"bg-color": "bg-accent",
"title": {
"text": "Prueba para vídeo YOUTUBE",
"colorLight": true
},
"description": {
"text": "UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.",
"colorLight": true
},
"buttons": [
{
"href": "#",
"text": "Local para botão 1"
},
{
"href": "#",
"text": "Local para botão 2"
}
]
},
{
"vimeo-video-code": "642337683?h=675bee2f81",
"vimeo-video-bg": {
"alt": "Dummy Text",
"url": "https://i.vimeocdn.com/video/1292042761-1987817c461351bdfc9ecb1fcbd7c0e14cf27b8039742ee21?mw=2300&mh=1105"
},
"isReversed": false,
"showHighlight": true,
"hasBg-color": true,
"bg-color": "bg-accent",
"title": {
"text": "Prueba para vídeo VIMEOOO",
"colorLight": true
},
"description": {
"text": "UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.",
"colorLight": true
},
"buttons": [
{
"href": "#",
"text": "Local para botão 1"
},
{
"href": "#",
"text": "Local para botão 2"
}
]
}
]
}
.ucipt-higlight-multi-slide {
background-color: #fff;
position: relative;
padding-top: 100px;
margin-bottom: 50px;
z-index: 0;
@media (--viewport-ms-max) {
padding-top: 0;
margin-top:55px;
}
.swiper-slide{
background-color:var(--color-white);
}
.swiper-navigation {
max-width: 267px;
margin-left: auto;
margin-right: auto;
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);
}
}
}
No notes defined.