Swegon Component Library

Card Carousel 

<div class="card-carousel">
    <div class="swiper-container card-carousel__container">
        <div class="swiper-wrapper">
            <div class="swiper-slide card-carousel__item">
                <div class="card card--image">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Swegon engagerar sig i Sweden Green Building Council
                            </h4>
                            <p class="card__date">10 september 2020</p>
                            <p class="card__description">Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="swiper-slide card-carousel__item">
                <div class="card card--image">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Stilren design och hög prestanda med nya KITE Ceiling
                            </h4>
                            <p class="card__date">07 september 2020</p>
                            <p class="card__description">Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="swiper-slide card-carousel__item">
                <div class="card card--image">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Swegon engagerar sig i Sweden Green Building Council
                            </h4>
                            <p class="card__date">10 september 2020</p>
                            <p class="card__description">Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="swiper-slide card-carousel__item">
                <div class="card card--image">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Stilren design och hög prestanda med nya KITE Ceiling
                            </h4>
                            <p class="card__date">07 september 2020</p>
                            <p class="card__description">Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.</p>

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="card-carousel__scrollbar">
        <div class="card-carousel__scrollbar-drag"></div>
    </div>
    <div class="card-carousel__navigation">
        <button class="card-carousel__prev">
            <svg class="icon " focusable="false">
                <use xlink:href="#icon-slider-arrow"></use>
            </svg>
        </button>
        <button class="card-carousel__next">
            <svg class="icon " focusable="false">
                <use xlink:href="#icon-slider-arrow"></use>
            </svg>
        </button>
    </div>
</div>
 
<div class="card-carousel">
    <div class="swiper-container card-carousel__container">
        <div class="swiper-wrapper">
            {{#each items}}
            <div class="swiper-slide card-carousel__item">
                {{> @card this}}
            </div>
            {{/each}}
        </div>
    </div>
    <div class="card-carousel__scrollbar">
        <div class="card-carousel__scrollbar-drag"></div>
    </div>
    <div class="card-carousel__navigation">
      <button class="card-carousel__prev">
          {{> @icon id="slider-arrow"}}
      </button>
      <button class="card-carousel__next">
          {{> @icon id="slider-arrow"}}
      </button>
    </div>
</div>
 
{
  "items": [
    {
      "modifiers": "image",
      "title": "Swegon engagerar sig i Sweden Green Building Council",
      "description": "Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).",
      "href": "#",
      "date": "10 september 2020",
      "image": {
        "src": "/mocks/img/office-coders.jpg",
        "alt": ""
      }
    },
    {
      "modifiers": "image",
      "title": "Stilren design och hög prestanda med nya KITE Ceiling",
      "description": "Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.",
      "href": "#",
      "date": "07 september 2020",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "modifiers": "image",
      "title": "Swegon engagerar sig i Sweden Green Building Council",
      "description": "Som ett led i sitt fortsatta hållbarhetsarbete har Swegon valt att gå med i Sweden Green Building Council (SGBC).",
      "href": "#",
      "date": "10 september 2020",
      "image": {
        "src": "/mocks/img/office-coders.jpg",
        "alt": ""
      }
    },
    {
      "modifiers": "image",
      "title": "Stilren design och hög prestanda med nya KITE Ceiling",
      "description": "Swegons nya luftdon levererar på många plan. Under utvecklingen av KITE Ceiling har bl.a. prestanda, design, installation och underhåll varit i fokus.",
      "href": "#",
      "date": "07 september 2020",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    }
  ],
  "showMoreLink": {
    "label": "View all News",
    "href": "#",
    "icon": "chevron-right"
  }
}
  • Content: 
    import Swiper from 'swiper';

const createCardCarousel = (el) => {
    const container = el.querySelector('.card-carousel__container');
    let carousel;

    const attachNavigation = () => {
        const prevButton = el.querySelector('.card-carousel__prev');
        const nextButton = el.querySelector('.card-carousel__next');

        if (prevButton) {
            prevButton.addEventListener('click', () => {
                carousel.slidePrev();
            });
        }

        if (nextButton) {
            nextButton.addEventListener('click', () => {
                carousel.slideNext();
            });
        }
    };

    const init = () => {
        const items = container.querySelectorAll('.card-carousel__item');
        const itemCount = items.length;

        const getMaxSlidesPerView = (breakpoint) => {
            let defaultSlides;
            switch (breakpoint) {
                case 320:
                    defaultSlides = 1.2;
                    break;
                case 640:
                    defaultSlides = 2.2;
                    break;
                case 1024:
                    defaultSlides = 3.2;
                    break;
                case 1440:
                    defaultSlides = 4.2;
                    break;
                default:
                    defaultSlides = 1.2;
            }

            if (itemCount <= Math.floor(defaultSlides)) {
                return itemCount;
            }

            return defaultSlides;
        };

        carousel = new Swiper(container, {
            slidesPerView: 'auto',
            spaceBetween: 16,
            centeredSlides: false,
            scrollbar: {
                el: el.querySelector('.card-carousel__scrollbar'),
                draggable: true,
                dragClass: 'card-carousel__scrollbar-drag'
            },
            breakpoints: {
                320: {
                    slidesPerView: getMaxSlidesPerView(320)
                },
                640: {
                    slidesPerView: getMaxSlidesPerView(640)
                },
                1024: {
                    slidesPerView: getMaxSlidesPerView(1024)
                },
                1440: {
                    slidesPerView: getMaxSlidesPerView(1440)
                }
            }
        });

        attachNavigation();
    };

    // Initialize
    init();
};

export default createCardCarousel;
  • URL: /components/raw/card-carousel/CardCarousel.js
  • Filesystem Path: src/components/card-carousel/CardCarousel.js
  • Size: 2.4 KB
  • Content: 
    .card-carousel {
    display: flex;
    flex-wrap: wrap;

    .panel & {
        margin-left: size(-2);
        width: calc(100% + #{size(4)});
    }
}

.card-carousel__container {
    .panel & {
        padding: 0 size(2);
    }
}

.card-carousel__scrollbar {
    width: 100%;
    height: 4px;
    margin-top: 8px;
    position: relative;

    .panel & {
        padding-left: size(2);
        width: calc(100% + #{size(-4)});
    }

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        height: 2px;
        width: 100%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.1);
    }
}

.card-carousel__scrollbar-drag {
    background: $color-green-dark;
    height: 100%;
}

.card-carousel__navigation {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.card-carousel__next,
.card-carousel__prev {
    width: size(8);
    height: size(8);
}

.card-carousel__next,
.card-carousel__prev {
    color: $color-gray-4;
    z-index: 3;
    position: relative;

    svg {
        width: size(3);
        height: size(3);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.card-carousel__prev {
    transform: rotate(180deg);
}
  • URL: /components/raw/card-carousel/card-carousel.scss
  • Filesystem Path: src/components/card-carousel/card-carousel.scss
  • Size: 1.3 KB
  • Content: 
    import CardCarousel from './CardCarousel';

const els = document.querySelectorAll('.card-carousel');

for (let el of els) {
    new CardCarousel(el);
}
  • URL: /components/raw/card-carousel/index.js
  • Filesystem Path: src/components/card-carousel/index.js
  • Size: 152 Bytes

No notes defined.