Vebego Component Library

Section Slider 

<!-- Default -->
<section class="mol-section-slider">

    <div class="cards-grid swiper-container">
        <div class="swiper-wrapper">
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/200/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/201/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/202/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/203/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="pagination">
        <div class="swiper-pagination"></div>
    </div>
</section>


<!-- With 2 Items -->
<section class="mol-section-slider">

    <div class="cards-grid swiper-container">
        <div class="swiper-wrapper">
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/200/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/201/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="pagination">
        <div class="swiper-pagination"></div>
    </div>
</section>


<!-- With 3 Items -->
<section class="mol-section-slider">

    <div class="cards-grid swiper-container">
        <div class="swiper-wrapper">
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/200/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/201/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card-item swiper-slide">
                <div class="atm-slide-section">
                    <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/202/400/500" alt="" loading="lazy">
                    </picture>
                    <div class="slide-content">
                        <div class="slide-content-inner">
                            <h3 class="atm-heading ">Facility management</h3>

                            <i class="atm-icon  far fa-external-link   "></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="pagination">
        <div class="swiper-pagination"></div>
    </div>
</section>


<section class="mol-section-slider">
    
        {{#if cards}}
            <div class="cards-grid swiper-container">
                <div class="swiper-wrapper">
                    {{#each cards}}
                        <div class="card-item swiper-slide">
                            {{render "@slide--section" this variant="section" merge=true}}
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="pagination">
                <div class="swiper-pagination"></div>
            </div>
        {{/if}}
</section>
 
/* Default */
{
  "title": {
    "text": "Waar voel jij je thuis?",
    "tag": "h2"
  },
  "subtitle": {
    "text": "Selecteer de omgeving die bij je past"
  },
  "cards": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/400/500"
      },
      "heading": {
        "text": "Facility management",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/201/400/500"
      },
      "heading": {
        "text": "Groen voorziening",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/202/400/500"
      },
      "heading": {
        "text": "Zorg",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/203/400/500"
      },
      "heading": {
        "text": "Schoonmaak",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    }
  ],
  "prev": {
    "icon": "chevron-left"
  },
  "next": {
    "icon": "chevron-right"
  }
}


/* With 2 Items */
{
  "title": {
    "text": "Kies je werkgebied",
    "tag": "h2"
  },
  "subtitle": {
    "text": "Selecteer de omgeving die bij je past"
  },
  "cards": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/400/500"
      },
      "heading": {
        "text": "Facility management",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/201/400/500"
      },
      "heading": {
        "text": "Groen voorziening",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    }
  ],
  "prev": {
    "icon": "chevron-left"
  },
  "next": {
    "icon": "chevron-right"
  }
}


/* With 3 Items */
{
  "title": {
    "text": "Ontdek je mogelijkheden",
    "tag": "h2"
  },
  "subtitle": {
    "text": "Selecteer de omgeving die bij je past"
  },
  "cards": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/400/500"
      },
      "heading": {
        "text": "Facility management",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/201/400/500"
      },
      "heading": {
        "text": "Groen voorziening",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/202/400/500"
      },
      "heading": {
        "text": "Zorg",
        "tag": "h3"
      },
      "link": {
        "url": "#",
        "text": "Meer informatie"
      }
    }
  ],
  "prev": {
    "icon": "chevron-left"
  },
  "next": {
    "icon": "chevron-right"
  }
}
  • Content: 
    .mol-section-slider {
    h2.atm-heading {
        @apply text-secondary-col-1 mb-2;
    }

    .atm-paragraph {
        @apply mb-6;
    }

    .cards-grid {
        @apply grid gap-6;

        &:has(:nth-child(2)) {
            @apply grid-cols-2;
        }

        &:has(:nth-child(3)) {
            @apply grid-cols-3;
        }

        &:has(:nth-child(4)) {
            @apply grid-cols-4;
        }
        /* 
        &.has-2-items {
            @media (max-width: 767px) {
                &.swiper-container {
                    display: block !important;
                    grid-template-columns: none !important;
                }
            }
        }

        &.has-3-items,
        &.has-4-items {
            @media (max-width: 1279px) {
                &.swiper-container {
                    display: block !important;
                    grid-template-columns: none !important;
                }
            }
        } */

        .card-item {
            @apply w-full;
        }

        &.swiper-container {
            @apply block overflow-visible;

            .swiper-wrapper {
                @apply flex;
            }

            .swiper-slide {
                @apply h-auto w-full;

                @media (min-width: 1280px) {
                    @apply h-auto w-full !important;
                }
            }
        }
    }

    .pagination {
        @apply flex justify-center items-center mt-8;

        * {
            @apply transition;
        }
    }

    .swiper-pagination {
        @apply relative w-auto mx-8;

        &-bullet {
            @apply bg-secondary-col-2 bg-opacity-50 rounded-full transition-all duration-300 p-1 mx-1 cursor-pointer;

            &-active {
                @apply bg-opacity-100 w-4;
            }
        }
    }

    @media (min-width: 1280px) {
        .cards-grid.swiper-container {
            @apply grid;

            &.has-2-items {
                @apply grid-cols-2;
            }

            &.has-3-items {
                @apply grid-cols-3;
            }

            .swiper-wrapper {
                @apply contents;
            }
        }

        .pagination {
            @apply hidden;
        }
    }
}
  • URL: /components/raw/section-slider/section-slider.css
  • Filesystem Path: src\components\03-molecules\section-slider\section-slider.css
  • Size: 2.3 KB
  • Content: 
    (function () {

    'use strict';

    var vacancyHighlightBlocks = document.querySelectorAll(
        '.mol-section-slider'
    );

    for (var i = 0; i < vacancyHighlightBlocks.length; i++) {
        const vacancyGrid =
            vacancyHighlightBlocks[i].querySelector('.cards-grid');

        if (!vacancyGrid) continue;

        const paginationEl =
            vacancyHighlightBlocks[i].querySelector('.pagination');

        new Swiper(vacancyGrid, {
            slidesPerView: 1.2,
            spaceBetween: 16,
            watchOverflow: true,
            pagination: {
                el: paginationEl,
                clickable: true,
                type: 'bullets',
            },
            breakpoints: {
                640: {
                    slidesPerView: 2.1,
                    spaceBetween: 24,
                },
                1280: {
                    slidesPerView: 3,
                    spaceBetween: 24,
                    enabled: false,
                },
            },
        });
    }
})();
  • URL: /components/raw/section-slider/section-slider.js
  • Filesystem Path: src\components\03-molecules\section-slider\section-slider.js
  • Size: 1.1 KB

No notes defined.