Vebego Component Library

Intro Media: Slider 

<div class="mol-intro-media">
    <svg class="ambient absolute -z-10 h-full w-full" preserveAspectRatio="xMidYMid slice" viewBox="0 0 1401 561" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_732_31)">
            <path class="animate-wiggle" d="M-2050.14 -204.345L1538.67 -2276.34L3610.67 1312.46L21.8563 3384.46L-2050.14 -204.345Z" fill="url(#paint0_linear_732_31)" />
            <path class="animate-wiggle" opacity="0.35" d="M-235.763 -1021.04C184.007 -844.351 514.379 -368.568 498.964 32.3718C481.557 487.334 63.3508 859.84 -256.582 932.059C-576.515 1004.28 -869.519 656.538 -468.412 471.643C-67.3055 286.749 116.195 264.613 302.527 -1.01921C259.546 -168.006 -47.7195 -422.581 -483.652 -646.742C-845.528 -833.228 -639.19 -1190.84 -235.763 -1021.04ZM743.374 -403.471C551.089 -574.814 489.961 -1069.37 661.244 -1309.44C793.684 -1495.02 1076.36 -1333.68 1004.04 -1160.87C858.856 -813.25 857.106 -584.44 881.882 -502.563C1123.47 -371.494 1565.15 -600.068 1652.51 -628.004C1865.35 -695.764 2057.55 -489.499 1784.38 -336.284C1318.25 -75.0371 933.111 -234.594 743.374 -403.471ZM2441.76 28.8834C2740.56 160.667 2742.79 590.227 2272.6 525.9C1818.24 463.679 1215.21 334.868 855.28 500.489C776.87 717.311 898.58 1141.45 1223.94 1711.81C1463.93 2132.35 883.395 2305.53 644.6 1988.36C335.85 1578.27 206.665 902.528 641.102 364.285C870.363 79.4919 1630.36 -328.355 2441.76 28.8834Z" fill="#562081" />
            <path class="animate-wiggle" d="M619.906 283.605C1040.16 304.998 1934.43 736.16 2151.54 1733.93C2231.54 2101.51 1833.08 2394.62 1574.58 1912.78C1324.5 1447.48 1036.08 798.822 638.144 575.386C382.987 648.953 70.9201 1049.81 -239.065 1738.82C-468.239 2247.19 -1022.52 1824.1 -889.306 1386.33C-717.037 821.296 -175.264 243.348 619.906 283.605Z" fill="url(#paint2_linear_732_31)" />
            <path class="animate-wiggle-2" d="M831.823 -74.8587C396.739 216.832 -233.363 80.0584 -517.676 -168.618C-801.989 -417.294 -676.358 -925.148 -232.682 -677.367C210.995 -429.586 356.12 -273.778 730.026 -280.429C856.731 -433.447 885.528 -891.581 799.415 -1449.29C728.136 -1912.07 1201.02 -1961.81 1315.63 -1471.74C1435.17 -961.448 1215.23 -332.216 831.823 -74.8587Z" fill="url(#paint3_linear_732_31)" />
        </g>
        <defs>
            <linearGradient id="paint0_linear_732_31" x1="3569.5" y1="1265.2" x2="-2038.5" y2="-164.605" gradientUnits="userSpaceOnUse">
                <stop stop-color="#501D79" />
                <stop offset="0.1001" stop-color="#562081" />
                <stop offset="0.4029" stop-color="#980D7F" />
                <stop offset="0.5587" stop-color="#871280" />
                <stop offset="0.8653" stop-color="#5C1E81" />
                <stop offset="0.9028" stop-color="#562081" />
                <stop offset="1" stop-color="#501D79" />
            </linearGradient>
            <linearGradient id="paint1_linear_732_31" x1="1940.44" y1="-897.473" x2="1576.67" y2="1225.63" gradientUnits="userSpaceOnUse">
                <stop stop-color="#B92D85" stop-opacity="0.7" />
                <stop offset="0.2185" stop-color="#C44072" stop-opacity="0.7655" />
                <stop offset="0.6611" stop-color="#DF703F" stop-opacity="0.8983" />
                <stop offset="1" stop-color="#F69915" />
            </linearGradient>
            <linearGradient id="paint2_linear_732_31" x1="1683.94" y1="1213.25" x2="-473.832" y2="1087.84" gradientUnits="userSpaceOnUse">
                <stop stop-color="#D62B87" stop-opacity="0.7" />
                <stop offset="0.2013" stop-color="#C02084" stop-opacity="0.7" />
                <stop offset="0.505" stop-color="#980D7F" stop-opacity="0.7" />
                <stop offset="0.9013" stop-color="#3F2584" stop-opacity="0.7" />
                <stop offset="1" stop-color="#282B85" stop-opacity="0.7" />
            </linearGradient>
            <linearGradient id="paint3_linear_732_31" x1="-150.413" y1="-274.39" x2="1381.97" y2="-1527.36" gradientUnits="userSpaceOnUse">
                <stop stop-color="#651B82" />
                <stop offset="0.9974" stop-color="#901080" />
            </linearGradient>
            <clipPath id="clip0_732_31">
                <rect width="1401" height="561" fill="white" />
            </clipPath>
        </defs>
    </svg>
    <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">
                    <i class="atm-icon  fal fa-chevron-left  fa-md "></i>

                </a>
            </div>
            <div class="swiper-next"><a class="atm-prev-next prev-next-next" title="Volgende">
                    <i class="atm-icon  fal fa-chevron-right  fa-md "></i>

                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-intro-media">
          {{render '@ambient'}}
    {{#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 lg:-mt-10;

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

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

        video{
            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: 973 Bytes
  • 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.