<link media="all" rel="stylesheet" href="/assets/themes/default/css/multi-property-card.css?cb=">
<div class="multi-property-card" data-module="multiPropertyCard">
<div class="multi-property-card__outer-container">
<div class="multi-property-card__arrow multi-property-card__arrow--left disabled js-arrow-left"></div>
<div class="multi-property-card__container">
<div class="multi-property-card__container-left">
<div class="multi-property-card__location js-multi-location"></div>
<div class="multi-property-card__development js-multi-development">Development</div>
<div class="multi-property-card__unit-text js-multi-length">5 units in this development</div>
</div>
<div class="multi-property-card__container-results js-results-container default">
<div class="multi-property-card__results-item js-multi-result-item">
<div class="property-carousal-card js-property-carousal-card">
<a class="property-carousal-card__link js-cta-url" href=#>
<div class="property-carousal-card__image js-image">
<link media="all" rel="stylesheet" href="/assets/themes//css/image.css?cb=">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="property-carousal-card__top-container">
<h1 class="property-carousal-card__title js-title">Title</h1>
</div>
<div class="property-carousal-card__keys-container">
<div class="property-carousal-card__type js-type">Type</div>
<div class="property-carousal-card__size js-size">Size</div>
</div>
</a>
</div>
</div>
<div class="multi-property-card__results-item js-multi-result-item">
<div class="property-carousal-card js-property-carousal-card">
<a class="property-carousal-card__link js-cta-url" href=#>
<div class="property-carousal-card__image js-image">
<link media="all" rel="stylesheet" href="/assets/themes//css/image.css?cb=">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="property-carousal-card__top-container">
<h1 class="property-carousal-card__title js-title">Title</h1>
</div>
<div class="property-carousal-card__keys-container">
<div class="property-carousal-card__type js-type">Type</div>
<div class="property-carousal-card__size js-size">Size</div>
</div>
</a>
</div>
</div>
<div class="multi-property-card__results-item js-multi-result-item">
<div class="property-carousal-card js-property-carousal-card">
<a class="property-carousal-card__link js-cta-url" href=#>
<div class="property-carousal-card__image js-image">
<link media="all" rel="stylesheet" href="/assets/themes//css/image.css?cb=">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="property-carousal-card__top-container">
<h1 class="property-carousal-card__title js-title">Title</h1>
</div>
<div class="property-carousal-card__keys-container">
<div class="property-carousal-card__type js-type">Type</div>
<div class="property-carousal-card__size js-size">Size</div>
</div>
</a>
</div>
</div>
<div class="multi-property-card__results-item js-multi-result-item">
<div class="property-carousal-card js-property-carousal-card">
<a class="property-carousal-card__link js-cta-url" href=#>
<div class="property-carousal-card__image js-image">
<link media="all" rel="stylesheet" href="/assets/themes//css/image.css?cb=">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="property-carousal-card__top-container">
<h1 class="property-carousal-card__title js-title">Title</h1>
</div>
<div class="property-carousal-card__keys-container">
<div class="property-carousal-card__type js-type">Type</div>
<div class="property-carousal-card__size js-size">Size</div>
</div>
</a>
</div>
</div>
<div class="multi-property-card__results-item js-multi-result-item">
<div class="property-carousal-card js-property-carousal-card">
<a class="property-carousal-card__link js-cta-url" href=#>
<div class="property-carousal-card__image js-image">
<link media="all" rel="stylesheet" href="/assets/themes//css/image.css?cb=">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85" />
<img src="" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="property-carousal-card__top-container">
<h1 class="property-carousal-card__title js-title">Title</h1>
</div>
<div class="property-carousal-card__keys-container">
<div class="property-carousal-card__type js-type">Type</div>
<div class="property-carousal-card__size js-size">Size</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="multi-property-card__arrow multi-property-card__arrow--right js-arrow-right"></div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/multi-property-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="multi-property-card" data-module="multiPropertyCard">
<div class="multi-property-card__outer-container">
<div class="multi-property-card__arrow multi-property-card__arrow--left disabled js-arrow-left"></div>
<div class="multi-property-card__container">
<div class="multi-property-card__container-left">
<div class="multi-property-card__location js-multi-location">{{cards.0.displayLocation}}</div>
<div class="multi-property-card__development js-multi-development">{{cards.0.development}}</div>
<div class="multi-property-card__unit-text js-multi-length">{{cards.length}} units in this development</div>
</div>
<div class="multi-property-card__container-results js-results-container default">
{{#if cards}}
{{#each cards}}
<div class="multi-property-card__results-item js-multi-result-item">
{{> @property-carousal-card }}
</div>
{{/each}}
{{/if}}
</div>
</div>
<div class="multi-property-card__arrow multi-property-card__arrow--right js-arrow-right"></div>
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"cards": [
{
"imageTag": "Tag",
"type": "property",
"firstInstance": true,
"gallery": {
"firstInstance": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"location": "Location",
"development": "Development",
"title": "Title",
"propertyType": "Type",
"squareFootage": "Size",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"imageTag": "Tag",
"type": "property",
"gallery": {
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"location": "Location",
"title": "Title",
"propertyType": "Type",
"squareFootage": "Size",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"imageTag": "Tag",
"type": "property",
"gallery": {
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"location": "Location",
"title": "Title",
"propertyType": "Type",
"squareFootage": "Size",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"imageTag": "Tag",
"type": "property",
"firstInstance": true,
"gallery": {
"firstInstance": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"location": "Location",
"development": "Development",
"title": "Title",
"propertyType": "Type",
"squareFootage": "Size",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"imageTag": "Tag",
"type": "property",
"firstInstance": true,
"gallery": {
"firstInstance": true,
"slides": [
{
"thumbnailUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"firstInstance": true,
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1508284207389-641db4deeb2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=768&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85",
"mobileImageUrl": "https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=85"
}
]
}
},
{
"thumbnailUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80",
"type": "image",
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "/assets/themes/default/images/ajax-loader.gif",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
}
}
]
},
"location": "Location",
"development": "Development",
"title": "Title",
"propertyType": "Type",
"squareFootage": "Size",
"cta": {
"text": "Find out more",
"url": "#"
}
}
]
}
.property-carousal-card {
&__link {
text-decoration: none;
}
&__image {
aspect-ratio: 1.62 / 1;
margin-bottom: rem(10);
overflow: hidden;
position: relative;
}
img {
@extend %object-fit-cover;
border-radius: rem(4);
}
&__title {
white-space: normal;
}
&__keys-container {
display: flex;
gap: 5%;
justify-content: space-between;
margin-top: rem(20);
}
&__type,
&__size {
background-color: $color-grey;
border-radius: rem(4);
padding: rem(10) rem(20);
text-decoration: none;
white-space: normal;
}
}
export class MultiPropertyCard {
constructor(component, propertyData) {
this.component = component;
this.leftArrow = this.component.querySelector('.js-arrow-left');
this.rightArrow = this.component.querySelector('.js-arrow-right');
this.resultItems = this.component.querySelectorAll('.js-multi-result-item');
this.resultsContainer = this.component.querySelector('.js-results-container');
if (propertyData) {
this.setPropertyData(propertyData);
}
this.init();
}
init() {
this.leftArrow.addEventListener('click', () => this.leftArrowClick());
this.rightArrow.addEventListener('click', () => this.rightArrowClick());
this.resultsContainer.addEventListener('scrollend', () => this.scrollEnd());
this.setArrowStatus();
}
setArrowStatus() {
if (this.resultItems.length <= 2) {
this.rightArrow.classList.add('disabled');
this.leftArrow.classList.add('disabled');
}
if (this.resultItems.length > 2) {
this.leftArrow.classList.add('disabled');
this.rightArrow.classList.remove('disabled');
}
}
scrollEnd() {
if (this.resultItems.length <= 2 || Math.ceil(this.resultsContainer.getBoundingClientRect().width + this.resultsContainer.scrollLeft) === this.resultsContainer.scrollWidth) {
this.rightArrow.classList.add('disabled');
} else {
this.rightArrow.classList.remove('disabled');
}
if (this.resultsContainer.scrollLeft === 0 && this.resultItems.length > 2) {
this.leftArrow.classList.add('disabled');
} else {
this.leftArrow.classList.remove('disabled');
}
}
leftArrowClick() {
this.resultsContainer = this.component.querySelector('.js-results-container');
this.resultItems = this.component.querySelectorAll('.js-multi-result-item');
this.resultsContainer.scrollLeft -= this.resultItems[0].clientWidth;
}
rightArrowClick() {
this.resultsContainer = this.component.querySelector('.js-results-container');
this.resultItems = this.component.querySelectorAll('.js-multi-result-item');
this.resultsContainer.scrollLeft += this.resultItems[0].clientWidth;
}
setPropertyData(propertyData) {
const locationElement = this.component.querySelector('.js-multi-location');
locationElement.innerText = propertyData[0] && propertyData[0].displayLocation ? propertyData[0].displayLocation : '';
const developmentElement = this.component.querySelector('.js-multi-development');
developmentElement.innerText = propertyData[0] && propertyData[0].development ? propertyData[0].development : '';
if (this.component.querySelector('.js-multi-length')) {
const lengthElement = this.component.querySelector('.js-multi-length');
lengthElement.innerText = `${propertyData.length} Units in this location`;
}
this.resultsContainer.innerHTML = propertyData.map((property) => {
return `
<div class="multi-property-card__results-item js-multi-result-item">
<div class="property-carousal-card js-property-carousal-card">
<a class="property-carousal-card__link js-cta-url" href=${property.propertyUrl}>
<div class="property-carousal-card__image-container">
<div class="property-carousal-card__image js-image">
<picture>
<source media="(max-width: 840px)" type='webp' srcset='${property.images[0]}?width=840&quality=85&format=webp'>
<source media="(min-width: 841px)" type='webp' srcset='${property.images[0]}?quality=85&format=webp&width=400'>
<source media="(max-width: 840px)" type='jpeg' srcset='${property.images[0]}?width=840&quality=85'>
<source media="(min-width: 841px)" type='jpeg' srcset='${property.images[0]}?quality=85&width=400'></source>
<img alt="image" src='${property.images[0]}' />
</picture>
</div>
</div>
<div class="property-carousal-card__text-container">
<div class="property-carousal-card__top-container">
${!this.component.querySelector('.js-results-container').classList.contains('default') ? `<span class="property-carousal-card__mls">${property.mls && property.mls}</span>` : ''}
<h1 class="property-carousal-card__title js-title">${property.title && property.title}</h1>
</div>
${!this.component.querySelector('.js-results-container').classList.contains('default') ? `<div class="property-carousal-card__price js-price">${property.price && property.price}</div>` : ' '}
<div class="property-carousal-card__keys-container">
${this.component.querySelector('.js-results-container').classList.contains('default') ? `<div class="property-carousal-card__detail property-carousal-card__detail--type js-type">${property.propertyType && property.propertyType}</div>` : ' '}
${!this.component.querySelector('.js-results-container').classList.contains('default') ? `<div class="property-carousal-card__detail property-carousal-card__detail--bedrooms js-bedrooms">${property.bedrooms && property.bedrooms}</div>` : ' '}
${!this.component.querySelector('.js-results-container').classList.contains('default') ? `<div class="property-carousal-card__detail property-carousal-card__detail--bathrooms js-bathrooms">${property.bathrooms && property.bathrooms}</div>` : ' '}
<div class="property-carousal-card__detail property-carousal-card__detail--size js-size">${property.squareFootage && property.squareFootage}</div>
</div>
</div>
</a>
</div>
</div>
`;
}).join('').trim();
this.resultsContainer = this.component.querySelector('.js-results-container');
this.resultsContainer.scrollLeft = 0;
this.resultItems = this.component.querySelectorAll('.js-multi-result-item');
this.setArrowStatus();
}
}
export default (component) => new MultiPropertyCard(component);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import './_property-carousal-card';
.multi-property-card {
&__outer-container {
border-radius: rem(8);
position: relative;
}
.gallery__slides {
aspect-ratio: 1.63 / 1;
}
&__location {
@extend %heading03;
}
&__development {
@extend %heading04;
}
&__container {
background: $color-white;
border-radius: rem(8);
display: flex;
flex-direction: row;
margin: auto auto;
padding: rem(30);
position: relative;
&-left,
&-results {
display: flex;
padding-left: rem(20);
}
&-left {
flex-direction: column;
width: 32%;
}
&-results {
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-color: transparent transparent; // Hide the scrollbar in FF
scrollbar-width: thin;
white-space: nowrap;
width: 67%;
// Hide the scrollbar in Safari, Chrome, Opera and (the new Chromium) Edge
&::-webkit-scrollbar {
display: none;
}
}
}
&__results-item {
align-self: flex-start;
flex-basis: 45%;
flex-grow: 0;
flex-shrink: 0;
&:last-of-type {
margin-right: 10%;
}
a {
display: block;
margin-right: rem(20);
}
}
&__arrow {
background-color: $color-white;
color: $color-black;
cursor: pointer;
height: 100%;
position: absolute;
&.disabled {
&::before {
color: $color-grey;
cursor: not-allowed;
}
}
&::before {
display: flex;
flex-direction: column;
font-size: 3rem;
height: 3rem;
justify-content: center;
line-height: rem(19);
position: absolute;
top: calc(50% - 29px);
}
&--left {
left: 30%;
top: 0;
width: 4%;
z-index: 10;
&::before {
content: '\02039';
left: -50%;
}
}
&--right {
opacity: 0.92;
right: rem(5);
top: 0;
width: 11%;
&::before {
content: '\0203A';
left: auto;
right: 50%;
}
@include breakpoint(large) {
width: 10%;
}
}
}
}
No notes defined.