Vebego Component Library

Step Slider 

<div class="mol-step-slider">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="atm-step">
                    <div class="atm-badge ">Stap 1</div>

                    <h5 class="atm-heading ">Solliciteer hier!</h5>

                    <div class="atm-paragraph text-md">Gebruik het formulier op deze pagina! We reageren binnen 2 werkdagen op jouw sollicitatie!</div>

                </div>

            </div>
            <div class="swiper-slide">
                <div class="atm-step">
                    <div class="atm-badge ">Stap 1</div>

                    <h5 class="atm-heading ">We bellen je</h5>

                    <div class="atm-paragraph text-md">We stellen je een aantal vragen om te kijken of de functie bij je past.</div>

                </div>

            </div>
            <div class="swiper-slide">
                <div class="atm-step">
                    <div class="atm-badge ">Stap 1</div>

                    <h5 class="atm-heading ">Eerste gesprek</h5>

                    <div class="atm-paragraph text-md">Is het een match? Ontmoet je toekomstige collega's en vraag ze alles wat je wilt.</div>

                </div>

            </div>
            <div class="swiper-slide">
                <div class="atm-step">
                    <div class="atm-badge ">Stap 1</div>

                    <h5 class="atm-heading ">Welkom bij het team!</h5>

                    <div class="atm-paragraph text-md">Je bent aangenomen! We zorgen voor een goede onboarding zodat je snel aan de slag kunt.</div>

                </div>

            </div>
        </div>
    </div>
    <div class="pagination">
        <div class="swiper-pagination"></div>
        <div>
            <div class="swiper-prev"> <i class="atm-icon  far fa-chevron-left   "></i>
            </div>
            <div class="swiper-next"> <i class="atm-icon  far fa-chevron-right   "></i>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-step-slider">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {{#each steps}}
        <div class="swiper-slide">
          {{render "@step" this merge=true}}
        </div>
      {{/each}}
    </div>
  </div>
  <div class="pagination">
    <div class="swiper-pagination"></div>
    <div>
      <div class="swiper-prev">{{render "@icon" prev merge=true}}</div>
      <div class="swiper-next">{{render "@icon" next merge=true}}</div>
    </div>
  </div>
</div>
 
{
  "next": {
    "style": "far",
    "icon": "fa-chevron-right"
  },
  "prev": {
    "style": "far",
    "icon": "fa-chevron-left"
  },
  "steps": [
    {
      "badge": "Stap 1",
      "title": {
        "text": "Solliciteer hier!",
        "tag": "h5"
      },
      "description": {
        "text": "Gebruik het formulier op deze pagina! We reageren binnen 2 werkdagen op jouw sollicitatie!"
      }
    },
    {
      "badge": "Stap 2",
      "title": {
        "text": "We bellen je",
        "tag": "h5"
      },
      "description": {
        "text": "We stellen je een aantal vragen om te kijken of de functie bij je past."
      }
    },
    {
      "badge": "Stap 3",
      "title": {
        "text": "Eerste gesprek",
        "tag": "h5"
      },
      "description": {
        "text": "Is het een match? Ontmoet je toekomstige collega's en vraag ze alles wat je wilt."
      }
    },
    {
      "badge": "Stap 4",
      "title": {
        "text": "Welkom bij het team!",
        "tag": "h5"
      },
      "description": {
        "text": "Je bent aangenomen! We zorgen voor een goede onboarding zodat je snel aan de slag kunt."
      }
    }
  ]
}
  • Content: 
    .mol-step-slider {
    .pagination {
        @apply flex justify-between items-center mt-8 gap-4;

        * {
            @apply transition;
        }

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

            &-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;
                }
            }
        }

        .swiper-prev,
        .swiper-next {
            @apply focus:ring-2 cursor-pointer text-black bg-gray-100 h-11 w-11 rounded-full hidden sm:inline-flex justify-center items-center;

            > * {
                @apply pointer-events-none;
            }

            &.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 overflow-visible;
        clip-path: polygon(0 0, 200% 0, 200% 100%, 0% 100%);

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

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

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

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

    .swiper-wrapper {
        @apply pb-6 pr-8;
    }
}
  • URL: /components/raw/step-slider/step-slider.css
  • Filesystem Path: src\components\03-molecules\step-slider\step-slider.css
  • Size: 2.1 KB
  • Content: 
    (function () {

    'use strict';

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

    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++) {
        const nextEl = imageSliders[i].querySelector('.swiper-next');
        const prevEl = imageSliders[i].querySelector('.swiper-prev');
        const paginationEl =
            imageSliders[i].querySelector('.swiper-pagination');

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

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

No notes defined.