Image carrousel: Default

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <div class="image-carrousel image-carrousel__overlay ">
    <div class="row image-carrousel__overlay__close" id="imageCarrouselClose">
        <svg class="icon icon-16_close     ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_close"></use>
        </svg>

    </div>
    <div class="row image-carrousel__content">
        <div class="swiper-container">
            <div class="image-carrousel__label">
                <svg class="icon icon-functional-image icon-16    ">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#functional-image"></use>
                </svg>

                <span> <span class="caption-label">2</span>
                    <span class="caption-label">imagens</span>
                </span>
            </div>
            <div class="swiper-wrapper">
                <div class="swiper-slide">

                    <img class="image-carrousel__img" src="/dist/images/image-carrousel_1.jpg" alt="image-carrousel 1, 16:9">
                    <div class="image-carrousel__leyend">
                        <span class="bodycopy-s">Este é um texto de legenda com no máximo 60 caracteres, etc. image 1</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                    </div>
                </div>
                <div class="swiper-slide">

                    <img class="image-carrousel__img" src="/dist/images/16_9.jpg" alt="image-carrousel 2, 16:9">
                    <div class="image-carrousel__leyend">
                        <span class="bodycopy-s">Este é um texto de legenda com no máximo 60 caracteres, etc. image 2</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                    </div>
                </div>
                <div class="swiper-slide">

                    <img class="image-carrousel__img" src="/dist/images/header-highlight-bg.jpg" alt="image-carrousel 3, regular">
                    <div class="image-carrousel__leyend">
                        <span class="bodycopy-s">Este é um texto de legenda com no máximo 60 caracteres, etc image 3.</span>
                        <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                    </div>
                </div>
            </div>

            <div class="image-carrousel__controls">
                <div class="swiper-navigation">
                    <div class="swiper-button-prev">
                        <svg class="icon icon-16_arrow-left     ">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-left"></use>
                        </svg>

                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next">
                        <svg class="icon icon-16_arrow-right     ">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-right"></use>
                        </svg>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="image-carrousel">
    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col col-ms-mr-ml">
        <div class="row image-carrousel__content">
            <div class="swiper-container">
                <div class="image-carrousel__label">
                    <svg class="icon icon-functional-image icon-16    ">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#functional-image"></use>
                    </svg>

                    <span> <span class="caption-label">2</span>
                        <span class="caption-label">imagens</span>
                    </span>
                </div>
                <div class="swiper-wrapper">
                    <div class="swiper-slide">

                        <img class="image-carrousel__img" src="/dist/images/image-carrousel_1.jpg" alt="image-carrousel 1, 16:9">
                        <div class="image-carrousel__leyend">
                            <span class="bodycopy-s">Este é um texto de legenda com no máximo 60 caracteres, etc. image 1</span>
                            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                        </div>
                    </div>
                    <div class="swiper-slide">

                        <img class="image-carrousel__img" src="/dist/images/16_9.jpg" alt="image-carrousel 2, 16:9">
                        <div class="image-carrousel__leyend">
                            <span class="bodycopy-s">Este é um texto de legenda com no máximo 60 caracteres, etc. image 2</span>
                            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                        </div>
                    </div>
                    <div class="swiper-slide">

                        <img class="image-carrousel__img" src="/dist/images/header-highlight-bg.jpg" alt="image-carrousel 3, regular">
                        <div class="image-carrousel__leyend">
                            <span class="bodycopy-s">Este é um texto de legenda com no máximo 60 caracteres, etc image 3.</span>
                            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
                        </div>
                    </div>
                </div>

                <div class="image-carrousel__controls">
                    <div class="swiper-navigation">
                        <div class="swiper-button-prev">
                            <svg class="icon icon-16_arrow-left     ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-left"></use>
                            </svg>

                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next">
                            <svg class="icon icon-16_arrow-right     ">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-right"></use>
                            </svg>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="image-carrousel image-carrousel__overlay {{#if isLightboxActive}}active{{/if}}">
    <div class="row image-carrousel__overlay__close" id="imageCarrouselClose">
        {{ render '@icon--16-close' }}
    </div>
    <div class="row image-carrousel__content">
            <div class="swiper-container">
                <div class="image-carrousel__label">
                    {{render '@icon--documents-image'}}
                    <span>{{> '@caption' number}}{{> '@caption' label}}</span>
                </div>
                <div class="swiper-wrapper">
                {{#each image}}
                    <div class="swiper-slide">
                        
                        <img class="image-carrousel__img" src="{{this.url}}" alt="{{this.alt}}">
                        <div class="image-carrousel__leyend">
                            {{> '@bodycopy' bodycopyS }}
                        </div>
                    </div>
                {{/each}}
                </div>
                
                <div class="image-carrousel__controls">                    
                    <div class="swiper-navigation">
                        <div class="swiper-button-prev">
                            {{ render '@icon--16-arrow-left' }}
                        </div>  
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next">
                            {{ render '@icon--16-arrow-right' }}
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
<div class="image-carrousel">
    <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col col-ms-mr-ml">
        <div class="row image-carrousel__content">
            <div class="swiper-container">
                <div class="image-carrousel__label">
                    {{render '@icon--documents-image'}}
                    <span>{{> '@caption' number}}{{> '@caption' label}}</span>
                </div>
                <div class="swiper-wrapper">
                {{#each image}}
                    <div class="swiper-slide">
                        
                        <img class="image-carrousel__img" src="{{this.url}}" alt="{{this.alt}}">
                        <div class="image-carrousel__leyend">
                            {{> '@bodycopy' bodycopyS }}
                        </div>
                    </div>
                {{/each}}
                </div>
                
                <div class="image-carrousel__controls">                    
                    <div class="swiper-navigation">
                        <div class="swiper-button-prev">
                            {{ render '@icon--16-arrow-left' }}
                        </div>  
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next">
                            {{ render '@icon--16-arrow-right' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        
            
            {
  "number": {
    "type": "-label",
    "text": "2"
  },
  "label": {
    "type": "-label",
    "text": "imagens"
  },
  "image": [
    {
      "url": "/dist/images/image-carrousel_1.jpg",
      "alt": "image-carrousel 1, 16:9",
      "bodycopyS": {
        "type": "-s",
        "text": "Este é um texto de legenda com no máximo 60 caracteres, etc. image 1"
      }
    },
    {
      "url": "/dist/images/16_9.jpg",
      "alt": "image-carrousel 2, 16:9",
      "bodycopyS": {
        "type": "-s",
        "text": "Este é um texto de legenda com no máximo 60 caracteres, etc. image 2"
      }
    },
    {
      "url": "/dist/images/header-highlight-bg.jpg",
      "alt": "image-carrousel 3, regular",
      "bodycopyS": {
        "type": "-s",
        "text": "Este é um texto de legenda com no máximo 60 caracteres, etc image 3."
      }
    }
  ]
}

File:

Content:


                                .image-carrousel {
    &__overlay {
        position: fixed;
        /* relativo a la cabecera sticky */
        z-index: 14;
        top: 0;
        left:0;
        width: 100%;
        height: 100vh;
        background:var(--color-blanket);
        display:none;
        &.active {
            display:block;
        }
        & .image-carrousel__content {
            height: 100vh;
            justify-content: center;
            align-items: center;    
            @media (--viewport-xs-max) {
                padding:0 10px;
                margin-top:0;
                margin-bottom:0;
            }
            @media (--viewport-ms-min) {
                margin-top:0;
                margin-bottom:0;
            }
            .swiper-wrapper{
                flex-flow: row;
                justify-content: flex-start;
                @media (--viewport-xs-max) {
                    height: calc(188px + 36px);
                    max-width: 335px;
                }
                @media (--viewport-ms-min) {
                    height: calc(329px + 36px);
                    max-width: 585px;
                }
                @media (--viewport-sm-min) {
                    height: calc(452px + 36px);
                    max-width: 803px;
                }
            }
            .swiper-slide{
                overflow: hidden;
                margin-bottom: 0 !important;
                @media (--viewport-xs-max) {
                    height: calc(188px + 36px);
                    max-width: 375px;
                }
                @media (--viewport-ms-min) {
                    height: calc(329px + 36px);
                    max-width: 764px;
                }
                @media (--viewport-sm-min) {
                    height: calc(329px + 36px);
                }
                @media (--viewport-md-min) {
                    height: calc(452px + 36px);
                    max-width: 1280px;
                }
                .image-carrousel__leyend{
                    background:var(--black);
                    .bodycopy-s {
                        color:var(--color-text-inverse);
                        
                    }
                }
                
            }
            .image-carrousel__controls{
                background:var(--black);
            }
            .swiper-navigation {
                right: 4px;
                .swiper-pagination,
                .swiper-button-prev,
                .swiper-button-next {
                    .icon {
                        fill:var(--color-icon-inverse);
                    }
                }
            }
        }
        &__close {
            z-index: 3;
            width:50px;
            height:50px;
            position:absolute;
            top:15px;
            right:15px;
            @media (--viewport-xs-max) {
                right:0;
            }
            &:hover {
                cursor:pointer;
            }
            .icon {
                fill:var(--color-icon-inverse);
                width:24px;
                height:24px;
            }
        }
    }
    &__content {
        position:relative;
        z-index: 2;
        margin-top:32px;
        margin-bottom:32px;
        @media (--viewport-xs-max) {
            margin-top:16px;
            margin-bottom:16px;
        }
    }
    &__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }   
    &__controls {
        position: absolute;
        right: 4px;
        bottom: 8px;
        z-index: 2;
        background: var(--color-background);
        @media (--viewport-xs-max) {
            display: flex;
            justify-content: flex-end;
            position: relative;
            right: auto;
            align-items: end;
            width: 100%;
            padding-right: 4px;
        }
    }     
    &__leyend {
        position: absolute;
        z-index: 1;
        left: 0;
        bottom: 0;
        background: var(--color-background);
        padding: 8px;
        margin: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap:10px; 
+        @media (--viewport-xs-min) {
            flex-flow: column;
            align-items: flex-start;
        }
        @media (--viewport-sm-min) {
            flex-flow: nowrap;
            justify-content: space-between;
            align-items: center;
        }
        .bodycopy-s {
            max-width: 100%;
        }
    }
    &__label {
        position:absolute;
        right:0;
        top:0;
        z-index:2;
        background:var(--color-blanket);
        padding: 8px;
        grid-gap: 8px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        span {
            color:var(--color-text-inverse);
        }
        .icon {
            fill:var(--color-icon-inverse);
        }
    }
    /* Swiper Variation*/
    .swiper-wrapper{
        flex-flow: row;
        justify-content: flex-start;
        max-width: 100%;
        @media (--viewport-xs-min) {
            height: calc(188px + 36px);
        }
        @media (--viewport-ms-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-sm-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-md-min) {
            height: calc(452px + 36px);
            max-width: 1280px;
        }
    }
    .swiper-slide{
        overflow: hidden;
        margin-bottom: 0 !important;
        max-width: 100%;
        @media (--viewport-xs-min) {
            height: calc(188px + 36px);
        }
        @media (--viewport-ms-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-sm-min) {
            height: calc(329px + 36px);
        }
        @media (--viewport-md-min) {
            height: calc(452px + 36px);
            max-width: 1280px;
        }
        .image-carrousel__img {
            @media (--viewport-xs-min) {
                height: 188px;
            }
            @media (--viewport-ms-min) {
                height: 329px;
            }
            @media (--viewport-sm-min) {
                height: 329px;
            }
            @media (--viewport-md-min) {
                height: 452px;
            }
        }
        
    }
    .swiper-navigation{
        display: flex;
        flex-flow: nowrap;
        width: 74px;
        justify-content: space-between;
        align-items: center;
        gap:30px;
        @media (--viewport-xs-max) {
            align-self: flex-end;
        }
        .swiper-pagination {
            display:none;
        }

        .swiper-pagination,
        .swiper-button-prev,
        .swiper-button-next {
            position: relative;
            right:0;
            &::after {
            display: none;
            }

            .icon {
                height: 24px;
                width: 24px;
                fill:var(--color-accent)
            }
        }

        .swiper-button-next,
        .swiper-button-prev {
            top: 0;
            width: 24px;
            height: 24px;
            margin-top: 0;
        }

        .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            margin-left: 5px;
            margin-right: 5px;
        }

        .swiper-pagination-bullet-active {
            background: var(--color-accent);
        }    
    }
}

URL: /components/raw/image-carrousel/image-carrousel.css
Filesystem Path: src/02-molecules/image-carrousel/image-carrousel.css
Size: 7.5 KB

Handle: @image-carrousel--default
Variants (3): Default , Hipotecas , Active Lightbox
Preview:
- With layout
- Component only
Filesystem Path: src/02-molecules/image-carrousel/image-carrousel.hbs
References (6): @icon--16-close, @icon--documents-image, @caption, @bodycopy, @icon--16-arrow-left, @icon--16-arrow-right

No notes defined.