Large Image Carousel

Ready

HTML
View
Context
Info
Notes


        
        <div class="content-carousel" data-module="contentCarousel">
    <div class="content-carousel__header">
        <div class="container">
            <p class="content-carousel__definition">Lorem ipsum dolor sit amet</p>
            <h2 class="content-carousel__title">Lorem ipsum dolor sit amet</h2>
        </div>
    </div>
    <div class="content-carousel__container">
        <div class="container">
            <div class="content-carousel__slider">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <article class="content-card ">
                                <!-- Display this div if image exists-->
                                <picture class="content-card__image">
                                    <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
                                    <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
                                    <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
                                </picture>
                                <div class="content-card__wrapper">
                                    <h6 class="content-card__heading">Default</h6>
                                    <div class="content-card__copy">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</div>
                                    <div class="content-card__actions">
                                        <a href=# class="btn btn--primary btn--small">
                                            Action
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="swiper-slide">
                            <article class="content-card ">
                                <!-- Display this div if image exists-->
                                <picture class="content-card__image">
                                    <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
                                    <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
                                    <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
                                </picture>
                                <div class="content-card__wrapper">
                                    <h6 class="content-card__heading">Default</h6>
                                    <div class="content-card__copy">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</div>
                                    <div class="content-card__actions">
                                        <a href=# class="btn btn--primary btn--small">
                                            Action
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="swiper-slide">
                            <article class="content-card ">
                                <!-- Display this div if image exists-->
                                <picture class="content-card__image">
                                    <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
                                    <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
                                    <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
                                </picture>
                                <div class="content-card__wrapper">
                                    <h6 class="content-card__heading">Default</h6>
                                    <div class="content-card__copy">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</div>
                                    <div class="content-card__actions">
                                        <a href=# class="btn btn--primary btn--small">
                                            Action
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <div class="swiper-slide">
                            <article class="content-card ">
                                <!-- Display this div if image exists-->
                                <picture class="content-card__image">
                                    <source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;767&amp;h&#x3D;430">
                                    <source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;1280&amp;h&#x3D;717">
                                    <img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed&#x3D;1&amp;w&#x3D;790&amp;h&#x3D;444" alt="Image Description" loading="lazy">
                                </picture>
                                <div class="content-card__wrapper">
                                    <h6 class="content-card__heading">Default</h6>
                                    <div class="content-card__copy">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.</div>
                                    <div class="content-card__actions">
                                        <a href=# class="btn btn--primary btn--small">
                                            Action
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content-carousel__buttons container">
        <button type="button" aria-label="Previous Slide" class="content-carousel__button content-carousel__button-prev">
            <span>
                <svg viewBox="0 0 6 12" class="link__icon link__icon--left">
                    <use xlink:href="#chevron-left" />
                </svg>
            </span>
        </button>
        <button type="button" aria-label="Next Slide" class="content-carousel__button content-carousel__button-next">
            <span>
                <svg viewBox="0 0 6 12" class="link__icon link__icon--right">
                    <use xlink:href="#chevron-right" />
                </svg>
            </span>
        </button>
    </div>
</div>


        <div class="content-carousel"
    data-module="contentCarousel">
    <div class="content-carousel__header">
        <div class="container">
            {{#if definition}}
            <p class="content-carousel__definition">{{definition}}</p>
            {{/if}}
            <h2 class="content-carousel__title">{{title}}</h2>
        </div>
    </div>
    <div class="content-carousel__container">
            <div class="container">
                <div class="content-carousel__slider">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            {{#json slides}}
                            {{#each this}}
                            <div class="swiper-slide">
                                {{>@content-card}}
                            </div>
                            {{/each}}
                            {{/json}}
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div class="content-carousel__buttons container">
    <button type="button" aria-label="{{previousSlideLabel}}" class="content-carousel__button content-carousel__button-prev">
      <span>
        {{>svg name="chevron-left" className="link__icon link__icon--left" viewBox="0 0 6 12"}}
      </span>
    </button>
    <button type="button" aria-label="{{nextSlideLabel}}" class="content-carousel__button content-carousel__button-next">
      <span>
        {{>svg name="chevron-right" className="link__icon link__icon--right" viewBox="0 0 6 12"}}
      </span>
    </button>
  </div>
</div>


        
            
            {
  "definition": "Lorem ipsum dolor sit amet",
  "title": "Lorem ipsum dolor sit amet",
  "slides": [
    {
      "image": "https://via.placeholder.com/282x159",
      "heading": "Default",
      "copy": "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.",
      "ctaLabel": "Action",
      "cta": "#",
      "icon": "chevron-right"
    },
    {
      "image": "https://via.placeholder.com/282x159",
      "heading": "Default",
      "copy": "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.",
      "ctaLabel": "Action",
      "cta": "#",
      "icon": "chevron-right"
    },
    {
      "image": "https://via.placeholder.com/282x159",
      "heading": "Default",
      "copy": "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.",
      "ctaLabel": "Action",
      "cta": "#",
      "icon": "chevron-right"
    },
    {
      "image": "https://via.placeholder.com/282x159",
      "heading": "Default",
      "copy": "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum.",
      "ctaLabel": "Action",
      "cta": "#",
      "icon": "chevron-right"
    }
  ],
  "previousSlideLabel": "Previous Slide",
  "nextSlideLabel": "Next Slide"
}

Handle: @content-card-carousel
Variants (3): Default , With Subheader , Without Subheader
Preview:
- With layout
- Component only
Filesystem Path: src/components/content-carousel/content-card-carousel/content-card-carousel.hbs
References (1): @content-card

Content Card Carousel

This component is a carousel of content cards

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import "../../node_modules/@verndale/front-end-components/lib/content-carousel/content-card/styles";
@import "../../node_modules/@verndale/front-end-components/lib/content-carousel/styles"

Copy and paste to your project any of the markup in the content card variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. The content card has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.

Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss

$main-color
$gray
$white
$black
$text-primary
$cta-primary
$border-primary