Standaard worden pakketten weergegeven in een carrousel. Als je liever hebt dat ze verschijnen als standaard prijskaarten, in een raster naast de rest van je prijzen, kun je dit aanpassen met aangepaste CSS.

Van dit:

Naar dit:

1. Ga naar de sectie Aangepaste CSS

Je vindt de CSS-sectie onder Instellingen > Widgets > Aangepaste CSS. Heb je dit gedeelte nog niet eerder gebruikt, bekijk dan Hoe je een bsport-widget aanpast met aangepaste CSS.

2. Selecteer het tabblad Algemeen

We raden aan om het tabblad Algemeen te gebruiken.

3. Plak de CSS

Plak de volgende regels in je aangepaste CSS-gedeelte:

/* ── CAROUSEL: DISABLE CAROUSEL BEHAVIOUR ─────────────────────────────────── */

.bs-carousel__indicator__container,
.bs-carousel__navigation__button,
.bs-initial-price__price {
  display: none;
}

.bs-carousel__items__indicator__container {
  overflow: hidden;
  contain: none;
  min-width: 0;
  pointer-events: none;
}

.bs-carousel__items__container {
  overflow: hidden;
  contain: none;
  min-width: 0;
  width: 100%;
}

.bs-carousel__items__container__view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 230px;
  gap: 20px;
  margin: 0;
  width: 100%;
  transform: none;
  transition: none;
  animation: none;
  translate: 0;
  will-change: unset;
  contain: none;
}

.bs-carousel__items__container__view[style*="transform"] {
  transform: none !important;
}

.bs-carousel__items__container__view > * {
  transform: none;
  transition: none;
  animation: none;
  opacity: 1;
  visibility: visible;
  display: block;
  position: static;
  margin-left: 0;
  width: auto;
  flex-shrink: 0;
}

.bs-carousel__item {
  position: static;
  transform: none;
  pointer-events: all;
}

.hidden-item-right,
.hidden-item-left {
  flex-basis: 0;
  translate: 0;
}

[id*=bsport-widget] .cleanslate .hidden-item-right,
[id*=bsport-widget] .cleanslate .hidden-item-left {
  translate: none;
}


/* ── CAROUSEL: GRID BREAKPOINTS ───────────────────────────────────────────── */

@media (width < 1475px) {
  .bs-carousel__items__container__view {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 1100px) {
  .bs-carousel__items__container__view {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width < 750px) {
  .bs-carousel__items__container__view {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
  }
}


/* ── CAROUSEL: CARD HEIGHTS ───────────────────────────────────────────────── */

.bs-carousel__item .bs-pack-card {
  height: 230px;
}

@media (width < 768px) {
  .bs-carousel__item {
    width: 100%;
    height: 160px;
  }
}

@media (width < 750px) {
  .bs-carousel__item .bs-pack-card {
    height: 175px;
  }

  .bs-pack-card {
    height: 175px;
  }

  .bs-carousel__item .bs-pack-card {
    height: 150px !important;
  }

  .bs-pack-card__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .bs-carousel__items__indicator__container {
    padding: 0 10px;
  }

  .bs-grid-item-justification-space-between {
    height: 100%;
  }

  .bs-pack-card__prices-container {
    align-items: end;
  }
}


/* ── CAROUSEL: CARD STYLES ────────────────────────────────────────────────── */

.bs-pack-card .bs-generic-card__content {
  background: linear-gradient(
    120deg,
    var(--color-secondary-background-paper) 50%,
    var(--color-background-paper) 50%
  );
  border-radius: var(--border-radius-4);
}

.bs-pack-card__title {
  font-size: var(--h6-fontSize);
}

.bs-pack-card__description {
  -webkit-line-clamp: 2;
}

.bs-pack-card__prices-container {
  height: 100%;
  justify-content: end;
}


/* ── PASS PAGE: LAYOUT ────────────────────────────────────────────────────── */

.bs-pass-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  min-width: 0;
}

.bs-pass-page__carousel__container {
  display: flex;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
  margin: 0;
}

.bs-pass-page__list__filters__container {
  min-width: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}

.bs-pass-page__payment__pack__list__container {
  min-width: 0;
  overflow: hidden;
}

.bs-pass-page__payment__pack__list__card__button {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.bs-paymentpack-card__grid {
  min-width: 0;
}


/* ── CAROUSEL CONTAINER: POINTER EVENTS ──────────────────────────────────── */

.bs-pass-page__carousel__container,
.bs-carousel__container,
.bs-carousel__items__container,
.bs-carousel__items__container__view,
.bs-carousel__item {
  pointer-events: none;
}

.bs-pack-card__footer > button,
.bs-button__container {
  pointer-events: all;
}


/* ── CAROUSEL CONTAINER ───────────────────────────────────────────────────── */

.bs-carousel__container {
  min-width: 0;
  width: 100%;
  flex: 1;
}


/* ── CAROUSEL CONTAINER: RESPONSIVE PADDING ──────────────────────────────── */

@container (width < 1100px) {
  .bs-carousel__item {
    flex-basis: 0;
  }

  .bs-pass-page__carousel__container {
    padding: 0 10px !important;
  }
}

@container (width < 450px) {
  .bs-pass-page__carousel__container {
    padding: var(--spacing-2);
  }
}


/* ── MISC ─────────────────────────────────────────────────────────────────── */

.bs-calendar-search__container,
.bs-search__container {
  margin-bottom: 0;
}

⚠️ Als je wilt dat de pakketten eerst verschijnen, voeg dan ook deze regel toe:

.bs-pass-page__carousel__container {  order: 0;}

4. Sla je wijzigingen op

Zodra je je aangepaste CSS-regels hebt toegevoegd, vergeet dan niet op te slaan. Wijzigingen worden direct toegepast.

Zo geef je pakketten weer zoals de rest van de prijskaarten

1. Ga naar de sectie Aangepaste CSS

2. Selecteer het tabblad Algemeen

3. Plak de CSS

4. Sla je wijzigingen op