Vebego Component Library

Slider 

<div class="org-article-block">
    <div class="article-block-top">
        <h1 class="atm-heading ">Relevant voor jou</h1>

        <div class="pagination">
            <div class="swiper-prev"> <i class="atm-icon  fa-solid fa-long-arrow-left  fa-md "></i>
            </div>
            <div class="swiper-next"> <i class="atm-icon  fa-solid fa-long-arrow-right  fa-md "></i>
            </div>
        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="mol-card-extended  js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="grid grid-cols-2">
                            <div class="reading-time">
                                <i class="atm-icon  far fa-eye  fa-sm "></i>

                                <span class="text">8 minuten</span>
                            </div>
                        </div>

                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="mol-card-extended  js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="grid grid-cols-2">
                            <div class="reading-time">
                                <i class="atm-icon  far fa-eye  fa-sm "></i>

                                <span class="text">8 minuten</span>
                            </div>
                        </div>

                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="mol-card-extended  js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="grid grid-cols-2">
                            <div class="reading-time">
                                <i class="atm-icon  far fa-eye  fa-sm "></i>

                                <span class="text">8 minuten</span>
                            </div>
                        </div>

                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="mol-card-extended  js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="grid grid-cols-2">
                            <div class="reading-time">
                                <i class="atm-icon  far fa-eye  fa-sm "></i>

                                <span class="text">8 minuten</span>
                            </div>
                        </div>

                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
            </div>
        </div>
    </div>
    <div class="vebego-container">
        <a class="atm-button atm-button-primary  button-md icon-right   ">
            <div class="button-content-wrapper">
                <span class="button-content">
                    <span>Meer weten</span>
                    <i class="atm-icon  fal fa-chevron-right   "></i>

                </span>
            </div>
            <span class="button-triangle"></span>
        </a>

    </div>
</div>
 
<div class="org-article-block">
  <div class="article-block-top">
    {{render '@heading' heading}}
    <div class="pagination">
      <div class="swiper-prev">{{render "@icon" prev merge=true}}</div>
      <div class="swiper-next">{{render "@icon" next merge=true}}</div>
    </div>
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {{#each cards}}
        <div class="swiper-slide">
          {{render "@card-extended" this merge=true}}
        </div>
      {{/each}}
    </div>
  </div>
  <div class="vebego-container">
    {{ render '@button-primary--icon-md' button merge=true }}
  </div>
</div>
 
{
  "heading": {
    "text": "Relevant voor jou",
    "tag": "h1"
  },
  "next": {
    "icon": "fa-long-arrow-right",
    "style": "fa-solid",
    "size": "fa-md"
  },
  "prev": {
    "icon": "fa-long-arrow-left",
    "style": "fa-solid",
    "size": "fa-md"
  },
  "cards": [
    {
      "paragraph": false
    },
    {
      "paragraph": false
    },
    {
      "paragraph": false
    },
    {
      "paragraph": false
    }
  ],
  "button": {
    "text": "Meer weten",
    "icon": {
      "style": "fal",
      "icon": "fa-chevron-right"
    }
  }
}
  • Content: 
    .org-article-block {
    .article-block-top {
        @apply flex justify-between items-center sm:mb-10 mb-4 vebego-container;

        .atm-heading {
            @apply text-secondary-col-1 mb-0;
        }

        .pagination {
            * {
                @apply transition;
            }
            .swiper-prev,
            .swiper-next {
                @apply focus:ring-2 cursor-pointer text-white bg-accent-1 h-11 w-11 rounded-full inline-flex justify-center items-center;

                &.swiper-button-disabled {
                    @apply opacity-50;
                    &:hover {
                        .atm-icon {
                            transform: translateX(0px);
                        }
                    }
                }

                &.hide-prevnext {
                    @apply hidden;
                }
            }

            .swiper-prev {
                @apply mr-4;
                &:hover {
                    .atm-icon {
                        transform: translateX(-2px);
                    }
                }
            }
            .swiper-next:hover {
                .atm-icon {
                    transform: translateX(2px);
                }
            }
        }
    }

    .swiper-container {
        @apply mb-8;

        @media screen(lg) {
            @apply vebego-container;
        }

        @media (max-width: 1024px) {
            padding-right: calc(100vw - 768px + 64px);
        }

        @media (max-width: 768px) {
            padding-right: calc(100vw - 640px + 32px);
        }

        @media (max-width: 640px) {
            padding-right: 32px;
        }

        .swiper-wrapper {
            @apply pb-6 pr-8;

            .swiper-slide {
                @apply relative;

                @media (max-width: 1024px) {
                    transform: translateX(calc(100vw / 2 - 768px / 2 + 32px));
                }

                @media (max-width: 768px) {
                    transform: translateX(calc(100vw / 2 - 640px / 2 + 16px));
                }

                @media (max-width: 640px) {
                    transform: translateX(16px);
                }

                h4.atm-heading {
                    @apply text-h5 sm:text-h4;
                }

                &:after {
                    content: '';
                    @apply absolute h-full w-[2px] left-0 top-0 bg-white;
                }

                .mol-card-extended div {
                    @apply pl-[2px];
                }
            }
        }
    }
}
  • URL: /components/raw/article-block/article-block.css
  • Filesystem Path: src\components\04-organisms\article-block\article-block.css
  • Size: 2.6 KB
  • Content: 
    (function () {

    'use strict';

    var imageSliders = document.querySelectorAll('.org-article-block');

    function checkArrows(swiper) {
        if (swiper.isBeginning && swiper.isEnd) {
            $(swiper.navigation.$prevEl).addClass('hide-prevnext');
            $(swiper.navigation.$nextEl).addClass('hide-prevnext');
        } else {
            $(swiper.navigation.$prevEl).removeClass('hide-prevnext');
            $(swiper.navigation.$nextEl).removeClass('hide-prevnext');
        }
    }

    for (var i = 0; i < imageSliders.length; i++) {
        var swiperContainer =
            imageSliders[i].querySelector('.swiper-container');

        const nextEl = imageSliders[i].querySelector('.swiper-next');
        const prevEl = imageSliders[i].querySelector('.swiper-prev');
        const paginationEl =
            imageSliders[i].querySelector('.swiper-pagination');

        new Swiper(swiperContainer, {
            slidesPerView: 1.3,
            spaceBetween: 32,
            watchOverflow: true,
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
            pagination: {
                el: paginationEl,
                clickable: true,
                type: 'bullets',
            },
            breakpoints: {
                0: {
                    slidesPerView: 1.3,
                    spaceBetween: 16,
                },
                640: {
                    slidesPerView: 2.3,
                    spaceBetween: 16,
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 32,
                },
            },
            on: {
                afterInit: function () {
                    checkArrows(this);
                },
                resize: function () {
                    checkArrows(this);
                },
            },
        });
    }
})();
  • URL: /components/raw/article-block/article-block.js
  • Filesystem Path: src\components\04-organisms\article-block\article-block.js
  • Size: 2 KB

No notes defined.