Vebego Component Library

Slider Extended 

<div class="mol-slider-extended">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Advies</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">De beste service</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/232/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/234/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Interim</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Uitbesteding</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/235/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Project management</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Uitdaging</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/236/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Advies</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">De beste service</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/237/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/238/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Interim</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Uitbesteding</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/239/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Project management</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Uitdaging</span>
                        </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="atm-slide--extended js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/240/263/360" alt="">
                    </picture>
                    <div class="slide-content">
                        <div class="title"><span class="atm-heading h6">Uitbesteding</span>
                        </div>
                        <div class="subtitle"><span class="atm-heading ">Keuzes</span>
                        </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="pagination">
        <div class="swiper-pagination"></div>
        <div>
            <div class="swiper-prev"> <i class="atm-icon  fa-solid fa-long-arrow-left   "></i>
            </div>
            <div class="swiper-next"> <i class="atm-icon  fa-solid fa-long-arrow-right  fa-md "></i>
            </div>
        </div>
    </div>
</div>
 
<div class="mol-slider-extended">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                {{#each slides}}
                    <div class="swiper-slide">
                        {{render "@slide--extended" 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": {
    "icon": "fa-long-arrow-right",
    "style": "fa-solid",
    "size": "fa-md"
  },
  "prev": {
    "icon": "fa-long-arrow-left",
    "style": "fa-solid"
  },
  "slides": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      },
      "heading": {
        "text": "Advies",
        "tag": "span"
      },
      "subHeading": {
        "text": "De beste service",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/232/263/360"
      },
      "heading": {
        "text": "Uitbesteding",
        "tag": "span"
      },
      "subHeading": {
        "text": "Keuzes",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/234/263/360"
      },
      "heading": {
        "text": "Interim",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitbesteding",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/235/263/360"
      },
      "heading": {
        "text": "Project management",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitdaging",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/236/263/360"
      },
      "heading": {
        "text": "Advies",
        "tag": "span"
      },
      "subHeading": {
        "text": "De beste service",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/237/263/360"
      },
      "heading": {
        "text": "Uitbesteding",
        "tag": "span"
      },
      "subHeading": {
        "text": "Keuzes",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/238/263/360"
      },
      "heading": {
        "text": "Interim",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitbesteding",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/239/263/360"
      },
      "heading": {
        "text": "Project management",
        "tag": "span"
      },
      "subHeading": {
        "text": "Uitdaging",
        "tag": "span"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/240/263/360"
      },
      "heading": {
        "text": "Uitbesteding",
        "tag": "span"
      },
      "subHeading": {
        "text": "Keuzes",
        "tag": "span"
      }
    }
  ]
}
  • Content: 
    .mol-slider-extended {
    overflow: visible;

    .swiper-container {
        @apply overflow-visible;
        clip-path: polygon(0 0, 200% 0, 200% 100%, 0% 100%);
    }

    .pagination {
        @apply flex self-end justify-between lg:justify-center items-center mt-4;

        * {
            @apply transition;
        }

        .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-pagination {
        @apply relative w-auto;

        .swiper-pagination-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;
            }
        }
    }

    @screen lg {
        .pagination {
            @apply justify-between;
        }
    }
}
  • URL: /components/raw/slider-extended/slider-extended.css
  • Filesystem Path: src\components\03-molecules\slider-extended\slider-extended.css
  • Size: 1.7 KB
  • Content: 
    (function () {

    'use strict';

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

    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: 2.1,
            spaceBetween: 16,
            watchOverflow: true,
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
            pagination: {
                el: paginationEl,
                clickable: true,
                type: 'bullets',
            },
            breakpoints: {
                0: {
                    slidesPerView: 1.3,
                },
                640: {
                    slidesPerView: 2.1,
                },
            },
            on: {
                afterInit: function () {
                    checkArrows(this);
                },
                resize: function () {
                    checkArrows(this);
                },
            },
        });
    }
})();
  • URL: /components/raw/slider-extended/slider-extended.js
  • Filesystem Path: src\components\03-molecules\slider-extended\slider-extended.js
  • Size: 1.8 KB

No notes defined.