<section class="flexible-image-carousel" data-module="flexibleImageCarousel" aria-labelledby="sectionHeadlineTitle">
<header class="section-headline">
<p class="section-headline__subtitle">Your Go-To</p>
<h2 class="section-headline__title" id="sectionHeadlineTitle">For Every Occasion</h2>
</header>
<div class="flexible-image-carousel__slider">
<div class="flexible-image-carousel__slide">
<a href="#" class="generic-card generic-card--tall">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
</div>
<div class="flexible-image-carousel__slide">
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">Celebrate Your Wedding in Style</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
</div>
<div class="flexible-image-carousel__slide">
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
</div>
</div>
<div class="flexible-image-carousel__buttons container">
<button type="button" aria-label="Previous Slide" class="flexible-image-carousel__button">
<span>
<svg viewBox="0 0 6 12">
<use xlink:href="#chevron-left" />
</svg>
</span>
</button>
<button type="button" aria-label="Next Slide" class="flexible-image-carousel__button">
<span>
<svg viewBox="0 0 6 12">
<use xlink:href="#chevron-right" />
</svg>
</span>
</button>
</div>
</section>
<section class="flexible-image-carousel" data-module="flexibleImageCarousel" aria-labelledby="sectionHeadlineTitle">
<header class="section-headline">
<p class="section-headline__subtitle">Your Go-To</p>
<h2 class="section-headline__title" id="sectionHeadlineTitle">For Every Occasion</h2>
</header>
<div class="flexible-image-carousel__slider">
<div class="flexible-image-carousel__slide">
<a href="#" class="generic-card generic-card--tall">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
</div>
<div class="flexible-image-carousel__slide">
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">Celebrate Your Wedding in Style</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
</div>
<div class="flexible-image-carousel__slide">
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
<a href="#" class="generic-card generic-card--short">
<div class="generic-card__inner">
<div class="generic-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=768&h=414">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1280&h=690">
<img src="https://verndale-image-tools.herokuapp.com/id/9wg5jCEPBsw?w=1600&h=700" alt="Image Description" loading="lazy">
</picture>
</div>
<h3 class="generic-card__title">ZZ Top at The Golden Nugget</h3>
<p class="generic-card__subtitle">Book Your Stay</p>
</div>
</a>
</div>
</div>
<div class="flexible-image-carousel__buttons container">
<button
type="button"
aria-label="Previous Slide"
class="flexible-image-carousel__button"
>
<span>
{{>svg name="chevron-left" viewBox="0 0 6 12"}}
</span>
</button>
<button
type="button"
aria-label="Next Slide"
class="flexible-image-carousel__button"
>
<span>
{{>svg name="chevron-right" viewBox="0 0 6 12"}}
</span>
</button>
</div>
</section>
/* No context defined. */
@import '../theme', 'variables';
.flexible-image-carousel {
margin-bottom: 3.75rem;
margin-top: 3.75rem;
padding: 0 0 0 1.25rem;
.flexible-image-carousel__buttons {
display: flex;
justify-content: flex-end;
margin-top: 1.25rem;
padding-right: 0;
}
.flexible-image-carousel__button {
align-items: center;
appearance: none;
background-color: transparent;
border: solid 0.0625rem $primary-color;
border-radius: 50%;
cursor: pointer;
display: flex;
height: 2.5rem;
justify-content: center;
padding: 0;
transition: all 0.2s ease-in-out;
width: 2.5rem;
span {
height: 1.25rem;
width: 1.25rem;
svg {
height: 20px;
fill: $primary-color;
}
}
&:disabled {
border-color: $disabled-color;
pointer-events: none;
svg {
fill: $disabled-color;
}
}
&:first-child {
margin-right: 0.625rem;
}
@include mq(desktop) {
height: 3.125rem;
width: 3.125rem;
}
}
.flexible-image-carousel__slider {
display: flex;
margin-top: 1rem;
@include mq(desktop) {
margin-top: 3.125rem;
}
.flexible-image-carousel__slide {
display: flex !important;
flex-direction: column;
justify-content: space-between;
.generic-card:first-of-type {
padding-bottom: 3.875rem;
}
.generic-card.generic-card--tall:not(.respect-ratio) {
height: 100%;
padding-bottom: 0;
}
&:not(:first-child) {
margin-left: -5px;
}
@include mq(desktop) {
&:not(:first-child) {
margin-left: 0;
}
}
}
}
.tns-inner {
margin: 0 !important;
}
}
.section-headline {
.section-headline__subtitle {
display: block;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.43;
margin: 0 0 0.5rem;
text-transform: uppercase;
@include mq(desktop) {
margin-bottom: 0.625rem;
}
}
.section-headline__title {
color: $primary-color;
margin: 0;
font-size: 1.625rem;
font-weight: 500;
line-height: 1.38;
}
}
.generic-card {
cursor: pointer;
display: block;
text-decoration: none;
.generic-card__inner {
display: flex;
flex-direction: column;
height: 100%;
padding-bottom: 0;
}
.generic-card__image {
flex: 1;
padding: 0;
border-radius: 0.125rem;
height: 0;
overflow: hidden;
padding-bottom: 50%;
position: relative;
img {
position: static;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform-origin: center;
transition: all 0.4s linear;
width: 100%;
font-family: 'object-fit: cover; object-position: center;';
object-fit: cover;
object-position: center;
}
}
.generic-card__inner__content {
height: 5.3125rem;
margin-bottom: 0.625rem;
}
.generic-card__title {
color: $card-title-color;
font-size: 1.3125rem;
font-stretch: normal;
font-style: normal;
font-weight: 500;
letter-spacing: normal;
line-height: normal;
margin: 0.625rem 0 0;
text-transform: initial;
}
.generic-card__subtitle {
display: inline-block;
overflow: hidden;
position: relative;
transition: color 0.3s ease-in-out;
color: $primary-color;
font-size: 0.875rem;
font-stretch: normal;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.71;
margin: 0;
width: auto;
&::before {
background: $primary-color;
bottom: 0.125rem;
content: '';
height: 0.0625rem;
left: 0;
position: absolute;
transform: translateX(-110%);
transform-origin: left;
transition: all 0.3s ease-in-out;
width: 100%;
}
}
&:hover {
.generic-card__image img {
transform: scale(1.1);
}
.generic-card__subtitle:before {
transform: translateX(0);
}
}
}
$primary-color: map-get($theme-colors, 'primary') !default;
$disabled-color: rgba(146, 146, 146, 0.35);
$card-title-color: map-get($theme-colors, 'primary-gray') !default;
import { Component } from '@verndale/core'
import { tns } from 'tiny-slider/src/tiny-slider'
class FlexibleImageCarousel extends Component {
setupDefaults() {
this.dom = {
slider: this.el.querySelector('.flexible-image-carousel__slider'),
cards: this.el.querySelectorAll('.generic-card'),
tallCards: this.el.querySelectorAll('.generic-card--tall'),
shortCards: this.el.querySelectorAll(
'.generic-card--default, .generic-card--short'
),
buttons: this.el.querySelector('.flexible-image-carousel__buttons')
}
this.wrapSliderText()
this.setupTallSlides()
this.initSlider()
}
initSlider() {
tns({
container: this.dom.slider,
loop: false,
items: 1,
gutter: 17,
edgePadding: 40,
nav: false,
controlsContainer: this.dom.buttons,
lazyloadSelector: 'lazyload',
preventScrollOnTouch: 'auto',
responsive: {
625: {
items: 2
},
960: {
items: 3,
gutter: 23,
edgePadding: 0
}
}
})
}
setupTallSlides() {
if (!Array.from(this.dom.shortCards).length) {
Array.from(this.dom.tallCards).forEach((tallCard) =>
tallCard.classList.add('respect-ratio')
)
}
}
wrapSliderText() {
Array.from(this.dom.cards).forEach((element) => {
const inner = element.querySelector('.generic-card__inner')
const innerElements = element.querySelectorAll(
'.generic-card__title, .generic-card__subtitle'
)
const wrapper = document.createElement('div')
inner.appendChild(wrapper)
wrapper.classList.add('generic-card__inner__content')
Array.from(innerElements).forEach((child) => wrapper.appendChild(child))
})
}
}
export default FlexibleImageCarousel
This component renders a image gallery with a slider.
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import '../../node_modules/@verndale/front-end-components/lib/C-CSL-2-3-column-image-gallery/styles';Copy and paste to your project any of the markup in the 3 Column Image Gallery variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. 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
$primary-color
$disabled-color
$card-title-color
You always need to set your overrides before the import of you component - for example:
$primary-color: map-get($theme-colors, 'primary') !default;
$disabled-color: rgba(146, 146, 146, 0.35);
$card-title-color: map-get($theme-colors, 'primary-gray') !default;
@import '../../node_modules/@verndale/front-end-components/lib/C-CSL-2-3-column-image-gallery/styles';