Vebego Component Library
<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.