<div class="alumni-carousel" data-embla-carousel>
<div class="alumni-carousel__controls">
<button class="alumni-carousel__previous-button" type="button" aria-label="Move carousel items to the right" data-embla-previous-button>
<div class="alumni-carousel__previous-button-icon">
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</div>
</button>
<button class="alumni-carousel__next-button" type="button" aria-label="Move carousel items to the left" data-embla-next-button>
<div class="alumni-carousel__next-button-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</div>
</button>
</div>
<div class="alumni-carousel__viewport" data-embla-viewport>
<div class="alumni-carousel__container">
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="100" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="200" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nickolas David Offerman
</h3>
<p class="alumni-card__title">
Lecturer in Theater and Berlind Playwright-in-Residence at Princeton University
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="300" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
N. D. Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nicky O.
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nickolas David Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
<script>
const rootNode = document.querySelector('[data-embla-carousel]')
const viewportNode = rootNode.querySelector('[data-embla-viewport]')
const prevButtonNode = rootNode.querySelector('[data-embla-previous-button]')
const nextButtonNode = rootNode.querySelector('[data-embla-next-button]')
const options = {
loop: false,
align: 'start',
containScroll: 'keepSnaps'
}
const embla = EmblaCarousel(viewportNode, options)
prevButtonNode.addEventListener('click', embla.scrollPrev, false)
nextButtonNode.addEventListener('click', embla.scrollNext, false)
</script>
<div class="alumni-carousel" data-embla-carousel>
<div class="alumni-carousel__controls">
<button class="alumni-carousel__previous-button" type="button" aria-label="Move carousel items to the right" data-embla-previous-button>
<div class="alumni-carousel__previous-button-icon">
{% include "bits/icons/left-chevron.twig" %}
</div>
</button>
<button class="alumni-carousel__next-button" type="button" aria-label="Move carousel items to the left" data-embla-next-button>
<div class="alumni-carousel__next-button-icon">
{% include "bits/icons/right-chevron.twig" %}
</div>
</button>
</div>
<div class="alumni-carousel__viewport" data-embla-viewport >
<div class="alumni-carousel__container">
{% for card in alumns %}
{% if loop.index < 5 %}
{% set delay = 100 + (loop.index0 * 100) %}
{% else %}
{% set delay = 400 %}
{% endif %}
<div
class="alumni-carousel__item"
data-sal="slide-up"
data-sal-duration="400"
data-sal-delay="{{ delay }}"
data-sal-easing="ease-out-quint"
>
{% include 'partials/homepages/theatre/alumni/card/card.twig' %}
</div>
{% endfor %}
</div>
</div>
</div>
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
<script>
const rootNode = document.querySelector('[data-embla-carousel]')
const viewportNode = rootNode.querySelector('[data-embla-viewport]')
const prevButtonNode = rootNode.querySelector('[data-embla-previous-button]')
const nextButtonNode = rootNode.querySelector('[data-embla-next-button]')
const options = {
loop: false,
align: 'start',
containScroll: 'keepSnaps'
}
const embla = EmblaCarousel(viewportNode, options)
prevButtonNode.addEventListener('click', embla.scrollPrev, false)
nextButtonNode.addEventListener('click', embla.scrollNext, false)
</script>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "dark",
"alumns": [
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nickolas David Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Lecturer in Theater and Berlind Playwright-in-Residence at Princeton University"
},
{
"name": "N. D. Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nicky O.",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nickolas David Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
}
]
}
largeBreakpoint = 1480px
.alumni-carousel
position relative
&__controls
fluid(margin-top margin-bottom, 320px, 1300px, 24px, 32px)
display flex
align-items center
justify-content center
+above(largeBreakpoint)
position absolute
top 0
left 0
right 0
bottom 0
justify-content space-between
margin 0 -96px
&__previous-button
&__next-button
display flex
align-items center
justify-content center
margin-left 8px
margin-right 8px
cursor pointer
height 100%
+above(largeBreakpoint)
width 80px
&:focus
&:hover
& ^[0]__previous-button-icon
& ^[0]__next-button-icon
background-color illiniOrange
& ._mark
fill illiniBlue
&__previous-button-icon
&__next-button-icon
border solid 2px illiniOrange
border-radius 50%
height 48px
width 48px
display flex
align-items center
justify-content center
margin-left -2px
& > svg
& .left-chevron__shape
& .right-chevron__shape
fill white
& > svg
height 16px
width 8px
&__previous-button-icon svg
margin-left -2px
&__next-button-icon svg
margin-right -2px
&__viewport
overflow hidden
&__container
margin 0 -8px
display grid
grid-auto-flow column
grid-auto-columns 100%
+above(670px)
grid-auto-columns 50%
+above(800px)
grid-auto-columns 33.33%
+above(1000px)
grid-auto-columns 25%
+above(1480px)
grid-auto-columns 16.66%
&__item
position relative
padding-left 8px
padding-right 8px
There are no notes for this item.