Vebego Component Library

Segment Slider 

<div class="mol-segment-slider">
    <div class="swiper-container">
        <div class="vebego-container">
            <div class="pagination">
                <div class="swiper-prev"><span class="atm-icon  fal fa-long-arrow-left  fa-2x "></span></div>
                <div class="swiper-next"><span class="atm-icon  fal fa-long-arrow-right  fa-2x "></span></div>
            </div>
        </div>

        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="atm-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/200/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/232/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/234/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/235/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/236/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/237/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/238/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/239/263/360" alt="">
                    </picture>
                    <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-segment js--clickable">
                    <span class="atm-heading h5">... consumerend Nederland</span>

                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/240/263/360" alt="">
                    </picture>
                    <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 class="swiper-pagination"></div>
    </div>
</div>
 
<div class="mol-segment-slider">
  <div class="swiper-container">
    <div class="vebego-container">
      <div class="pagination">
        <div class="swiper-prev">{{render "@icon" prev merge=true}}</div>
        <div class="swiper-next">{{render "@icon" next merge=true}}</div>
      </div>
    </div>

    <div class="swiper-wrapper">
      {{#each segments}}
        <div class="swiper-slide">
          {{render "@segment" this merge=true}}
        </div>
      {{/each}}
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>
 
{
  "next": {
    "icon": "fa-long-arrow-right",
    "style": "fal",
    "size": "fa-2x"
  },
  "prev": {
    "icon": "fa-long-arrow-left",
    "style": "fal",
    "size": "fa-2x"
  },
  "segments": [
    {
      "image": {
        "src": "https://picsum.photos/id/200/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/232/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/234/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/235/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/236/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/237/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/238/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/239/263/360"
      }
    },
    {
      "image": {
        "src": "https://picsum.photos/id/240/263/360"
      }
    }
  ]
}
  • Content: 
    .mol-segment-slider {
    @apply ml-6;
    @apply md:ml-12;

    .swiper-container {
        @apply pl-2;
    }

    .swiper-slide {
        @apply py-2;
    }

    .swiper-wrapper {
        @apply pb-6;
    }

    .pagination {
        @apply w-full;
        @apply relative;
        @apply mb-8;

        .swiper-prev,
        .swiper-next {
            @apply cursor-pointer;
            @apply inline-block;
            @apply text-cta;
            transition: all 0.2s ease-in-out;

            &.swiper-button-disabled {
                @apply text-opacity-20;
                transform: scale(0.8);
            }

            &.hide-prevnext {
                @apply hidden;
            }
        }

        .swiper-prev {
            @apply mr-4;
        }
    }

    .swiper-pagination {
        @apply bottom-0;

        &-bullet {
            @apply bg-gray;
            @apply p-1;

            &-active {
                @apply bg-navy;
            }
        }
    }
}
  • URL: /components/raw/segment-slider/segment-slider.css
  • Filesystem Path: src\components\03-molecules\segment-slider\segment-slider.css
  • Size: 1 KB
  • Content: 
    (function () {

  "use strict";

  var imageSliders = document.querySelectorAll(".mol-segment-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++) {
    var swiperContainer = imageSliders[i].querySelector(".swiper-container");

    new Swiper(swiperContainer, {
      slidesPerView: 1.3,
      spaceBetween: 16,
      watchOverflow: true,
      navigation: {
        nextEl: ".swiper-next",
        prevEl: ".swiper-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
        type: "bullets",
      },
      breakpoints: {
        640: {
          slidesPerView: 2.3,
        },
        768: {
          slidesPerView: 3.3,
          spaceBetween: 32,
        },
        1024: {
          slidesPerView: 4.3,
        },
        1440: {
          slidesPerView: 5.3,
        },
      },
      on: {
        afterInit: function () {
          checkArrows(this);
        },
        resize: function () {
          checkArrows(this);
        },
      },
    });
  }
})();
  • URL: /components/raw/segment-slider/segment-slider.js
  • Filesystem Path: src\components\03-molecules\segment-slider\segment-slider.js
  • Size: 1.4 KB

No notes defined.