Vebego Component Library

Intro Media: Slider 

<div class="mol-intro-media">
    <div class="intro-media-slider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/231/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/232/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/234/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/235/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/236/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/237/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/238/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-image">
                        <picture class="atm-image ">
                            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                            <img class="" src="https://picsum.photos/id/239/768/768" alt="" loading="lazy">
                        </picture>
                    </div>
                </div>
            </div>
            <div class="swiper-prev"><a class="atm-prev-next prev-next-prev" title="Vorige">
                    <span class="atm-icon  fal fa-chevron-left  fa-md "></span>
                </a>
            </div>
            <div class="swiper-next"><a class="atm-prev-next prev-next-next" title="Volgende">
                    <span class="atm-icon  fal fa-chevron-right  fa-md "></span>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-intro-media">
    {{#if video}}
        <div class="intro-media-video">
            {{render '@image' videoThumbnail merge=true}}
            {{render '@play' play merge=true}}
        </div>
    {{else if slides}}
        <div class="intro-media-slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    {{#each slides}}
                        <div class="swiper-slide">
                            <div class="slide-image">
                                {{render '@image' this merge=true}}
                            </div>
                        </div>
                    {{/each}}
                </div>
                <div class="swiper-prev">{{render '@prev-next--prev'}}</div>
                <div class="swiper-next">{{render '@prev-next--next'}}</div>
            </div>
        </div>
    {{else if image}}
        <div class="intro-media-image">
            {{render '@image'}}
        </div>
    {{/if}}
</div>
 
{
  "slides": [
    {
      "src": "https://picsum.photos/id/231/768/768"
    },
    {
      "src": "https://picsum.photos/id/232/768/768"
    },
    {
      "src": "https://picsum.photos/id/234/768/768"
    },
    {
      "src": "https://picsum.photos/id/235/768/768"
    },
    {
      "src": "https://picsum.photos/id/236/768/768"
    },
    {
      "src": "https://picsum.photos/id/237/768/768"
    },
    {
      "src": "https://picsum.photos/id/238/768/768"
    },
    {
      "src": "https://picsum.photos/id/239/768/768"
    }
  ]
}
  • Content: 
    .mol-intro-media {
    @apply relative mt-10 pr-10 md:pr-0;

    &::before {
        content: '';
        @apply block absolute;
        @apply w-full h-full;
        @apply bg-primary-100;
    }

    .intro-media-video,
    .intro-media-image,
    .intro-media-slider {
        @apply relative;
        @apply top-10 ml-10 md:ml-0 md:-left-10;
        max-width: 768px;
        max-height: 768px;
    }

    .intro-media-video {
        @apply cursor-pointer;

        /* .atm-video {
            width: 100%;
            padding-top: 100%;
            height: 0px;
            padding-bottom: 0;
        }

        video {
            top: 0;
            object-fit: cover;
        } */

        .atm-play {
            @apply absolute bottom-0 left-0 z-10;
        }
    }

    .intro-media-image {
    }

    .intro-media-slider {
        .swiper-prev,
        .swiper-next {
            @apply absolute bottom-0 left-0 z-10;
        }

        .swiper-next {
            @apply transform translate-x-full;
        }
    }
}

.tpl-news-page,
.tpl-blog-page,
.tpl-vacancy-page,
.tpl-initiative-page {
    .intro-media-video,
    .intro-media-image,
    .intro-media-slider {
        max-width: 768px;
        max-height: 768px;
    }
}
  • URL: /components/raw/intro-media/intro-media.css
  • Filesystem Path: src\components\03-molecules\intro-media\intro-media.css
  • Size: 1.3 KB
  • Content: 
    (function () {


    'use strict';

    // Init slider

    var imageSliders = document.querySelectorAll('.mol-intro-media .intro-media-slider');

    for (var i = 0; i < imageSliders.length; i++) {

        var swiperContainer = imageSliders[i].querySelector('.swiper-container');

        new Swiper(swiperContainer, {

            navigation: {
                
                nextEl: '.swiper-next',
                prevEl: '.swiper-prev',
            },
        });
    }

    // Make thumbnail clickable
    
    $('.mol-intro-media .intro-media-video .atm-play').on('click', function (e) {

        e.stopPropagation();
    });

    $('.mol-intro-media .intro-media-video').on('click', function (e) {

        $(this).find('.atm-play').trigger('click');
    });

})();
  • URL: /components/raw/intro-media/intro-media.js
  • Filesystem Path: src\components\03-molecules\intro-media\intro-media.js
  • Size: 811 Bytes

No notes defined.