<div class="carousel glide">
<div class="carousel__inner glide__track" data-glide-el="track">
<div class="carousel__items glide__slides">
<div class="carousel__item glide__slide">
<div class="carousel__item__container">
<div class="carousel__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 20">
<title>quote</title>
<path fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z" />
</svg>
</div>
<div class="carousel__image">
<img class="carousel__image__image" loading="lazy" height="" width="" src="holder.js/500x500?auto=yes&random=yes" alt="">
</div>
<figure class="carousel__text-container">
<blockquote class="carousel__text">
In recent years, pets are licit governments. In ancient times the literature would have us believe that a tiny punishment is not but an operation. In ancient times a cocoa is a sketchy weeder. Nowhere is it disputed that a tugboat is a branch's government. Yclept zoos show us how snows can be utensils.
</blockquote>
<figcaption class="carousel__subtext">
Person, Namerton, Title here.
</figcaption>
</figure>
</div>
</div>
<div class="carousel__item glide__slide">
<div class="carousel__item__container">
<div class="carousel__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 20">
<title>quote</title>
<path fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z" />
</svg>
</div>
<div class="carousel__image">
<img class="carousel__image__image" loading="lazy" height="" width="" src="holder.js/500x500?auto=yes&random=yes" alt="">
</div>
<figure class="carousel__text-container">
<blockquote class="carousel__text">
Though we assume the latter, the literature would have us believe that a crowning pamphlet is not but a roadway.
</blockquote>
<figcaption class="carousel__subtext">
Namerton, Persony, Title here.
</figcaption>
</figure>
</div>
</div>
<div class="carousel__item glide__slide">
<div class="carousel__item__container">
<div class="carousel__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 20">
<title>quote</title>
<path fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z" />
</svg>
</div>
<div class="carousel__image">
<img class="carousel__image__image" loading="lazy" height="" width="" src="holder.js/500x500?auto=yes&random=yes" alt="">
</div>
<figure class="carousel__text-container">
<blockquote class="carousel__text">
An apple of the egypt is assumed to be a grouty white. This could be, or perhaps a strapless manager without wrenches is truly a seashore of testy motorcycles.
</blockquote>
<figcaption class="carousel__subtext">
Namerton, Persony, Title here.
</figcaption>
</figure>
</div>
</div>
<div class="carousel__item glide__slide">
<div class="carousel__item__container">
<div class="carousel__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 20">
<title>quote</title>
<path fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z" />
</svg>
</div>
<div class="carousel__image">
<img class="carousel__image__image" loading="lazy" height="" width="" src="holder.js/500x500?auto=yes&random=yes" alt="">
</div>
<figure class="carousel__text-container">
<blockquote class="carousel__text">
Few can name a fissile philosophy that isn't a gleesome disease. An edge of the wire is assumed to be an attrite alloy. Before crooks, dredgers were only romanians.
</blockquote>
<figcaption class="carousel__subtext">
Namerton, Persony, Title here.
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<button class="glide__arrow glide__arrow--left carousel__button carousel__button--left" data-glide-dir="<" aria-label="Navigate to the previous slide">
<svg role="img" class="left-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>previous</title>
<path class="_mark left-chevron__shape" d="M3.49504 5.98003L7.99893 0.0064757L7.99035 2.55136e-07L4.50389 5.59932e-07L-5.26754e-07 5.97463L4.51032 12L8 12L3.49504 5.98003Z" />
</svg>
</button>
<button class="glide__arrow glide__arrow--right carousel__button carousel__button--right" data-glide-dir=">" aria-label="Navigate to the next slide">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</button>
<div class="carousel__counter" data-glide-el="controls[nav]">
<button class="carousel__counter__dot" data-glide-dir="=0" aria-label="Navigate to slide 1">
</button>
<button class="carousel__counter__dot" data-glide-dir="=1" aria-label="Navigate to slide 2">
</button>
<button class="carousel__counter__dot" data-glide-dir="=2" aria-label="Navigate to slide 3">
</button>
<button class="carousel__counter__dot" data-glide-dir="=3" aria-label="Navigate to slide 4">
</button>
</div>
</div>
{{ enqueue_script('glide-js-init') }}
<div class="carousel glide">
<div class="carousel__inner glide__track" data-glide-el="track">
<div class="carousel__items glide__slides">
{% for item in component.items %}
<div class="carousel__item glide__slide">
<div class="carousel__item__container">
<div class="carousel__icon">
{% include 'bits/icons/quote-icon.twig' %}
</div>
{% if item.image %}
<div class="carousel__image">
<img class="carousel__image__image" loading="lazy" height="{{ item.image.height }}" width="{{ item.image.width }}" src="{{ item.image.src|resize(900, 900)|towebp }}" alt="{{ item.image.altText }}">
</div>
{% endif %}
<figure class="carousel__text-container">
<blockquote class="carousel__text">
{{ item.text }}
</blockquote>
<figcaption class="carousel__subtext">
{{ item.subtext }}
</figcaption>
</figure>
</div>
</div>
{% endfor %}
</div>
</div>
<button class="glide__arrow glide__arrow--left carousel__button carousel__button--left" data-glide-dir="<" aria-label="Navigate to the previous slide">
{% include 'bits/icons/left-chevron.twig' %}
</button>
<button class="glide__arrow glide__arrow--right carousel__button carousel__button--right" data-glide-dir=">" aria-label="Navigate to the next slide">
{% include 'bits/icons/right-chevron.twig' %}
</button>
<div class="carousel__counter" data-glide-el="controls[nav]">
{% for item in component.items %}
<button class="carousel__counter__dot" data-glide-dir="={{ loop.index0 }}" aria-label="Navigate to slide {{ loop.index }}">
</button>
{% endfor %}
</div>
</div>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "white",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"footerLinks": {
"items": [
{
"title": "Subscribe to our newsletter",
"url": "#"
},
{
"title": "Explore membership benefits",
"url": "#"
},
{
"title": "See career opportunities",
"url": "#"
}
]
},
"contactInfo": {
"copyright": "© National Network of Public Health Institutes. All Rights Reserved",
"facebookLink": "https://facebook.com",
"linkedInLink": "https://linkedin.com",
"youtubeLink": "https://youtube.com",
"flickrLink": "https://flickr.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youTubeLink": "https://youtube.com"
},
"utilityNavigation": {
"items": [
{
"title": "Member directory",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
},
{
"title": "Blog",
"url": "#"
}
]
},
"primaryNavigation": {
"items": [
{
"title": "Workforce resources",
"url": "#",
"children": [
{
"title": "Resource Directory",
"url": "#",
"children": []
},
{
"title": "Trainings",
"url": "#",
"children": [
{
"title": "Training Level 3 example",
"url": "#"
}
]
}
]
},
{
"title": "Programs & Projects",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Data Modernization",
"url": "#",
"children": []
},
{
"title": "Environmental Health and Emergency Preparedness",
"url": "#",
"children": []
},
{
"title": "Evaluation and Impact",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Third level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fourth level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fifth level example",
"url": "#",
"isActive": true
}
]
},
{
"title": "Fourth level example 2",
"url": "#"
},
{
"title": "Fourth level example 3",
"url": "#"
}
]
}
]
},
{
"title": "Multisector Strategies and Population Health",
"url": "#",
"children": []
},
{
"title": "Public Health Events and Convenings Management",
"url": "#",
"children": []
},
{
"title": "Public Health Infrastructure Grant",
"url": "#",
"children": []
},
{
"title": "Public health training",
"url": "#",
"children": []
}
]
},
{
"title": "Explore the Network",
"url": "#",
"children": [
{
"title": "Member Directory",
"url": "#",
"children": []
},
{
"title": "Membership paths",
"url": "#",
"children": []
}
]
},
{
"title": "Partner with us",
"url": "#"
},
{
"title": "About",
"url": "#",
"children": [
{
"title": "Blog",
"url": "#",
"children": []
},
{
"title": "Events",
"url": "#",
"children": []
},
{
"title": "Newsletters",
"url": "#",
"children": []
},
{
"title": "Signature programs",
"url": "#",
"children": []
},
{
"title": "Contact us",
"url": "#",
"children": []
},
{
"title": "Meet the team",
"url": "#",
"children": []
}
]
}
]
},
"component": {
"type": "carousel",
"hasItems": true,
"showSection": true,
"items": [
{
"image": {
"src": "holder.js/500x500?auto=yes&random=yes",
"alt": "Placeholder Image 1"
},
"text": "In recent years, pets are licit governments. In ancient times the literature would have us believe that a tiny punishment is not but an operation. In ancient times a cocoa is a sketchy weeder. Nowhere is it disputed that a tugboat is a branch's government. Yclept zoos show us how snows can be utensils.",
"subtext": "Person, Namerton, Title here."
},
{
"image": {
"src": "holder.js/500x500?auto=yes&random=yes",
"alt": "Placeholder Image 2"
},
"text": "Though we assume the latter, the literature would have us believe that a crowning pamphlet is not but a roadway.",
"subtext": "Namerton, Persony, Title here."
},
{
"image": {
"src": "holder.js/500x500?auto=yes&random=yes",
"alt": "Placeholder Image 3"
},
"text": "An apple of the egypt is assumed to be a grouty white. This could be, or perhaps a strapless manager without wrenches is truly a seashore of testy motorcycles.",
"subtext": "Namerton, Persony, Title here."
},
{
"image": {
"src": "holder.js/500x500?auto=yes&random=yes",
"alt": "Placeholder Image 4"
},
"text": "Few can name a fissile philosophy that isn't a gleesome disease. An edge of the wire is assumed to be an attrite alloy. Before crooks, dredgers were only romanians.",
"subtext": "Namerton, Persony, Title here."
}
]
}
}
@use 'sass:color';
// Breakpoints
$breakpoint: 60rem; // 960px
$breakpointDesktop: 90rem; // 1312px
$breakpointMax: calc($breakpoint - 0.0625rem); // 959.9375px
.carousel {
// Spacing variables
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 5rem;
// Component sizes
--carousel-max-width-sm: 40rem;
--carousel-max-width: 66rem;
--counter-dot-size: 1.5rem;
--carousel-focus-outline-offset: 0.5rem;
--carousel-icon-wrapper: 2rem;
--carousel-icon-size: 1rem;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-evenly;
overflow: hidden;
@media (max-width: #{$breakpointMax}) {
padding-block-end: var(--spacing-xl);
background-color: var(--blueTint);
}
@media (min-width: #{$breakpoint}) {
--carousel-icon-size: 3rem;
display: grid;
grid-template-areas: 'leftNav carousel rightNav';
grid-template-rows: 1fr;
justify-content: center;
background-color: var(--navy);
}
&__icon {
width: 100%;
height: 100%;
max-width: var(--carousel-icon-wrapper);
max-height: var(--carousel-icon-wrapper);
& > svg {
fill: var(--navy);
width: var(--carousel-icon-size);
height: var(--carousel-icon-size);
}
@media (min-width: #{$breakpoint}) {
grid-column: 1;
grid-row: 2;
}
}
&__text {
@include headline5;
color: var(--navy);
margin-bottom: 1rem;
}
&__subtext {
@include detailBold;
color: var(--navy);
}
&__button {
display: flex;
background-color: var(--navy);
padding: var(--spacing-sm);
align-items: center;
height: 101%;
flex: 0 0 auto;
cursor: pointer;
transition: all 0.25s;
svg {
fill: var(--white);
width: var(--carousel-icon-size);
height: var(--carousel-icon-size);
}
&:focus-visible {
outline-offset: calc(var(--carousel-focus-outline-offset) * -1);
}
&:hover {
svg {
fill: color.adjust($blueTint, $lightness: -20%);
}
}
@media (min-width: #{$breakpointDesktop}) {
width: 100%;
max-width: 100%;
}
&--left {
clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
grid-area: leftNav-start / leftNav-end;
@media (max-width: #{$breakpointMax}) {
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}
@media (min-width: #{$breakpoint}) {
padding: 2rem 4rem 2rem 5rem;
}
}
&--right {
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
grid-area: rightNav-start / rightNav-end;
@media (max-width: #{$breakpointMax}) {
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}
@media (min-width: #{$breakpoint}) {
padding: 2rem 5rem 2rem 4rem;
}
}
}
&__inner {
width: 100%;
flex: 1 0 100%;
background-color: var(--blueTint);
@media (min-width: #{$breakpoint}) {
grid-area: carousel-start / carousel-end;
max-width: calc(1059px + 6rem);
margin-inline: auto;
&:before {
content: '';
position: absolute;
top: -2%;
bottom: -2%;
left: 50%;
transform: translateX(-50%);
max-width: calc(1059px + 12rem);
width: 100%;
background-color: var(--blueTint);
z-index: 0;
}
}
}
// inner grid for slide content
&__item__container {
display: flex;
flex-direction: column;
padding: var(--spacing-md);
gap: var(--spacing-md);
width: 100%;
margin-inline: auto;
max-width: calc(var(--carousel-max-width-sm) - var(--spacing-md));
@media (min-width: #{$breakpoint}) {
display: grid;
grid-template-columns: 1fr 2fr 6fr;
grid-template-rows: 1fr 4fr 1fr;
justify-items: center;
padding: var(--spacing-lg) var(--spacing-md);
max-width: calc(var(--carousel-max-width) - var(--spacing-md));
}
}
&__item {
@media (min-width: #{$breakpoint}) {
align-self: center;
}
}
&__image {
max-width: 10.25rem;
@media (min-width: #{$breakpoint}) {
grid-column: 2;
grid-row: 1/-1;
align-self: center;
max-width: 13rem;
}
}
&__text-container {
@media (min-width: #{$breakpoint}) {
grid-column: 3;
grid-row: 2;
}
}
&__counter {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: var(--spacing-sm);
left: 50%;
width: 100%;
max-width: calc(var(--carousel-max-width) + var(--spacing-lg) * 1.5);
margin-inline: auto;
gap: var(--spacing-sm);
transform: translateX(-50%);
&__text {
@include detail;
color: var(--navy);
}
}
&__counter__dot {
width: var(--counter-dot-size);
height: var(--counter-dot-size);
background-color: color.adjust($blueTint, $lightness: -20%);
border: 0.09rem solid color.adjust($blueTint, $lightness: -20%);
border-radius: 50%;
transition: all 0.25s;
cursor: pointer;
&__text {
@include detail;
}
&.glide__bullet--active {
opacity: 1;
background-color: var(--navy);
border-color: color.adjust($blueTint, $lightness: -30%);
}
&:focus,
&:hover {
background-color: var(--navy);
}
&:focus-visible {
outline-offset: var(--carousel-focus-outline-offset);
}
}
}
No notes defined.