Vebego Component Library

Showcase 

<div class="mol-showcase">
    <div class="swiper-container swiper-image-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <picture class="atm-image ">
                    <source srcset="https://picsum.photos/id/10/1280/1280" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/10/1024/1024" media="(min-width: 768px)">
                    <img class="" src="https://picsum.photos/id/10/263/360" alt="" loading="lazy">
                </picture>
            </div>
            <div class="swiper-slide">
                <picture class="atm-image ">
                    <source srcset="https://picsum.photos/id/200/1280/1280" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/200/1024/1024" media="(min-width: 768px)">
                    <img class="" src="https://picsum.photos/id/200/263/360" alt="" loading="lazy">
                </picture>
            </div>
            <div class="swiper-slide">
                <picture class="atm-image ">
                    <source srcset="https://picsum.photos/id/100/1280/1280" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/100/1024/1024" media="(min-width: 768px)">
                    <img class="" src="https://picsum.photos/id/100/263/360" alt="" loading="lazy">
                </picture>
            </div>
            <div class="swiper-slide">
                <picture class="atm-image ">
                    <source srcset="https://picsum.photos/id/10/1280/1280" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/10/1024/1024" media="(min-width: 768px)">
                    <img class="" src="https://picsum.photos/id/10/263/360" alt="" loading="lazy">
                </picture>
            </div>
        </div>

        <div class="swiper-pagination"></div>
    </div>
    <div class="showcase--content">
        <div class="swiper-navigation">
            <a class="atm-button atm-button-primary  swiper-prev  button-icon-only ">
                <div class="button-content-wrapper">
                    <span class="button-content">

                        <i class="atm-icon  fa-regular fa-chevron-left   "></i>

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

            <a class="atm-button atm-button-primary  swiper-next  button-icon-only ">
                <div class="button-content-wrapper">
                    <span class="button-content">

                        <i class="atm-icon  fa-regular fa-chevron-right   "></i>

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

        </div>
        <div class="swiper-container swiper-text-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="atm-paragraph text-md">Maecenas sit amet vulputate sapien. Cras vel enim non mauris bibendum tincidunt vel lacinia ipsum. Sed eu placerat neque. onec ultrices metus in risus auctor feugiat. Vivamus quis nibh elementum, iaculis augue quis, tristique quam.</div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis felis vel sem eleifend dapibus. Curabitur sed tempus mauris, nec malesuada libero. Ut volutpat est ut tortor vulputate, id porta ligula tristique. Quisque pharetra sapien mauris, sit amet maximus elit laoreet et.</div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-paragraph text-md">Vivamus vitae urna elementum, lacinia lorem et, posuere lorem. Aliquam sagittis, dui sit amet aliquet euismod, mauris ex mollis diam, quis cursus felis nisi rutrum neque. Proin velit arcu, consectetur eget risus id, blandit tristique sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>

                </div>
                <div class="swiper-slide">
                    <div class="atm-paragraph text-md">Maecenas sit amet vulputate sapien. Cras vel enim non mauris bibendum tincidunt vel lacinia ipsum. Sed eu placerat neque. onec ultrices metus in risus auctor feugiat. Vivamus quis nibh elementum, iaculis augue quis, tristique quam.</div>

                </div>
            </div>
        </div>

    </div>
</div>
 
<div class="mol-showcase">
    <div class="swiper-container swiper-image-container">
        <div class="swiper-wrapper">
            {{#each slides}}
                <div class="swiper-slide">
                    {{render "@image" this.image merge=true}}
                </div>
            {{/each}}
        </div>

        <div class="swiper-pagination"></div>
    </div>
    <div class="showcase--content">
        <div class="swiper-navigation">
            {{render '@button-primary--icon-md' prev merge=true}}
            {{render '@button-primary--icon-md' next merge=true}}
        </div>
        <div class="swiper-container swiper-text-container">
            <div class="swiper-wrapper">
            {{#each slides}}
                <div class="swiper-slide">
                    {{render "@paragraph" this.paragraph merge=true}}            
                </div>
            {{/each}}
            </div>
        </div>
            
    </div>
</div>
 
{
  "next": {
    "modifier": "swiper-next",
    "text": "",
    "icon": {
      "icon": "fa-chevron-right",
      "style": "fa-regular"
    }
  },
  "prev": {
    "modifier": "swiper-prev",
    "text": "",
    "icon": {
      "icon": "fa-chevron-left",
      "style": "fa-regular"
    }
  },
  "slides": [
    {
      "image": {
        "src": "https://picsum.photos/id/10/263/360",
        "sources": [
          {
            "mediaQuery": "(min-width: 1024px)",
            "src": "https://picsum.photos/id/10/1280/1280"
          },
          {
            "mediaQuery": "(min-width: 768px)",
            "src": "https://picsum.photos/id/10/1024/1024"
          }
        ]
      },
      "paragraph": {
        "text": "Maecenas sit amet vulputate sapien. Cras vel enim non mauris bibendum tincidunt vel lacinia ipsum. Sed eu placerat neque. onec ultrices metus in risus auctor feugiat. Vivamus quis nibh elementum, iaculis augue quis, tristique quam."
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/200/263/360",
        "sources": [
          {
            "mediaQuery": "(min-width: 1024px)",
            "src": "https://picsum.photos/id/200/1280/1280"
          },
          {
            "mediaQuery": "(min-width: 768px)",
            "src": "https://picsum.photos/id/200/1024/1024"
          }
        ]
      },
      "paragraph": {
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis felis vel sem eleifend dapibus. Curabitur sed tempus mauris, nec malesuada libero. Ut volutpat est ut tortor vulputate, id porta ligula tristique. Quisque pharetra sapien mauris, sit amet maximus elit laoreet et."
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/100/263/360",
        "sources": [
          {
            "mediaQuery": "(min-width: 1024px)",
            "src": "https://picsum.photos/id/100/1280/1280"
          },
          {
            "mediaQuery": "(min-width: 768px)",
            "src": "https://picsum.photos/id/100/1024/1024"
          }
        ]
      },
      "paragraph": {
        "text": "Vivamus vitae urna elementum, lacinia lorem et, posuere lorem. Aliquam sagittis, dui sit amet aliquet euismod, mauris ex mollis diam, quis cursus felis nisi rutrum neque. Proin velit arcu, consectetur eget risus id, blandit tristique sem. Interdum et malesuada fames ac ante ipsum primis in faucibus."
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/10/263/360",
        "sources": [
          {
            "mediaQuery": "(min-width: 1024px)",
            "src": "https://picsum.photos/id/10/1280/1280"
          },
          {
            "mediaQuery": "(min-width: 768px)",
            "src": "https://picsum.photos/id/10/1024/1024"
          }
        ]
      },
      "paragraph": {
        "text": "Maecenas sit amet vulputate sapien. Cras vel enim non mauris bibendum tincidunt vel lacinia ipsum. Sed eu placerat neque. onec ultrices metus in risus auctor feugiat. Vivamus quis nibh elementum, iaculis augue quis, tristique quam."
      }
    }
  ]
}
  • Content: 
    .mol-showcase {
    @apply bg-primary bg-opacity-10 border border-primary border-opacity-20 rounded-xl overflow-hidden mb-8;

    img {
        @apply aspect-video object-cover w-full;
    }

    .showcase--content {
        @apply flex gap-x-8 px-4 py-6;
        .atm-paragraph {
            p {
                @apply mb-0;
            }
        }
    }

    .swiper-pagination {
        @apply flex px-4 py-2;

        .swiper-pagination-bullet {
            @apply rounded-full w-full transition-all bg-white opacity-100;
        }

        .swiper-pagination-bullet-active {
            @apply w-[200%] bg-accent-1;
        }
    }
    .swiper-navigation {
        @apply hidden lg:flex gap-x-2;
    }
}
  • URL: /components/raw/showcase/showcase.css
  • Filesystem Path: src\components\03-molecules\showcase\showcase.css
  • Size: 740 Bytes
  • Content: 
    (function () {

    'use strict';

    let showcaseSliders = document.querySelectorAll('.mol-showcase');

    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 (let i = 0; i < showcaseSliders.length; i++) {
        let swiperImageContainer = showcaseSliders[i].querySelector(
            '.swiper-image-container'
        );
        let swiperTextContainer = showcaseSliders[i].querySelector(
            '.swiper-text-container'
        );

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

        let swiperShowcaseText = new Swiper(swiperTextContainer, {
            slidesPerView: 1,
            spaceBetween: 0,
            effect: "fade",
            allowTouchMove: false,
            fadeEffect: {
              crossFade: true
            },
            speed: 1000,
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
            pagination: {
                el: paginationEl,
                clickable: true,
                type: 'bullets',
            },
            // breakpoints: {
            //     0: {
            //         allowTouchMove: true,
            //     },
            //     1024: {
            //         allowTouchMove: false,
            //     }
            // },
        });

        let swiperShowcaseImage = new Swiper(swiperImageContainer, {
            slidesPerView: 1,
            spaceBetween: 0,
            watchOverflow: true,
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
            pagination: {
                el: paginationEl,
                clickable: true,
                type: 'bullets',
            },
            breakpoints: {
                0: {
                    allowTouchMove: true,
                },
                1024: {
                    allowTouchMove: false,
                }
            },
            thumbs: {
                swiper: swiperShowcaseText,
              },
        });

    }
})();
  • URL: /components/raw/showcase/showcase.js
  • Filesystem Path: src\components\03-molecules\showcase\showcase.js
  • Size: 2.6 KB

No notes defined.