Vebego Component Library

Image Slider 

<div class="mol-image-slider">
    <div class="swiper-container">
        <div class="swiper-wrapper relative">
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/231/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/232/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/234/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/235/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/236/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/237/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/238/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/239/960/540" alt="">
                    </picture>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="slide-image">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/2/960/540" alt="">
                    </picture>
                </div>
            </div>
        </div>
        <div class="slider-navigation">
            <div class="vebego-container">
                <div class="slider-navigation-wrapper">
                    <div class="slider-navigation-button slider-navigation-prev"> <i class="atm-icon  fa-solid fa-angle-left  fa-md "></i>
                    </div>
                    <div class="slider-navigation-button slider-navigation-next"> <i class="atm-icon  fa-solid fa-angle-right  fa-md "></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
 
<div class="mol-image-slider">
    <div class="swiper-container">
        <div class="swiper-wrapper relative">
            {{#each images}}
                <div class="swiper-slide">
                    <div class="slide-image">
                        {{render '@image' this}}
                    </div>
                </div>
            {{/each}}
        </div>
        <div class="slider-navigation">
            <div class="vebego-container">
                <div class="slider-navigation-wrapper">
                    <div class="slider-navigation-button slider-navigation-prev">{{render "@icon" prev merge=true}}</div>
                    <div class="slider-navigation-button slider-navigation-next">{{render "@icon" next merge=true}}</div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
 
{
  "prev": {
    "icon": "fa-angle-left",
    "style": "fa-solid",
    "size": "fa-md"
  },
  "next": {
    "icon": "fa-angle-right",
    "style": "fa-solid",
    "size": "fa-md"
  },
  "images": [
    {
      "src": "https://picsum.photos/id/231/960/540"
    },
    {
      "src": "https://picsum.photos/id/232/960/540"
    },
    {
      "src": "https://picsum.photos/id/234/960/540"
    },
    {
      "src": "https://picsum.photos/id/235/960/540"
    },
    {
      "src": "https://picsum.photos/id/236/960/540"
    },
    {
      "src": "https://picsum.photos/id/237/960/540"
    },
    {
      "src": "https://picsum.photos/id/238/960/540"
    },
    {
      "src": "https://picsum.photos/id/239/960/540"
    },
    {
      "src": "https://picsum.photos/id/2/960/540"
    }
  ]
}
  • Content: 
    .mol-image-slider {
    .swiper-container {
        @apply pb-12;

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

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

        @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-slide {
            > .slide-image {
                @apply relative h-0;

                padding-bottom: 75%;

                @screen md {
                    padding-bottom: 56.25%;
                }

                .atm-image {
                    @apply absolute w-full h-full;

                    img {
                        @apply w-full h-full object-cover;
                    }
                }
            }

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

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

            @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);
            }
        }

        .slider-navigation {
            @apply absolute top-1/2 -translate-y-1/2 left-0 pb-12 z-10 w-full;

            .slider-navigation-wrapper {
                @apply px-4 flex justify-between;

                .slider-navigation-button {
                    @apply bg-white w-12 h-12 rounded-full shadow flex justify-center items-center text-secondary-col-1 text-h5;

                    &.swiper-button-disabled {
                        @apply opacity-60;
                    }

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

        .swiper-pagination {
            @apply bottom-0;

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

                &-active {
                    @apply bg-opacity-100 w-4;
                }
            }
        }
    }
}
  • URL: /components/raw/image-slider/image-slider.css
  • Filesystem Path: src\components\03-molecules\image-slider\image-slider.css
  • Size: 2.7 KB
  • Content: 
    (function () {

    'use strict';

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

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

        const nextEl = imageSliders[i].querySelector('.slider-navigation-next');
        const prevEl = imageSliders[i].querySelector('.slider-navigation-prev');
        const paginationEl =
            imageSliders[i].querySelector('.swiper-pagination');
        const classExists =
            document.getElementsByClassName('tpl-content-page').length > 0;

        new Swiper(swiperContainer, {
            spaceBetween: 16,
            slidesPerView: 1.2,
            watchOverflow: true,
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
            pagination: {
                el: paginationEl,
                clickable: true,
                type: 'bullets',
            },
            breakpoints: {
                1022: {
                    slidesPerView: classExists ? 2.2 : 0.8,
                },
                1025: {
                    slidesPerView: classExists ? 2.2 : 1.2,
                },
            },
        });
    }
})();
  • URL: /components/raw/image-slider/image-slider.js
  • Filesystem Path: src\components\03-molecules\image-slider\image-slider.js
  • Size: 1.3 KB

No notes defined.