<!-- Error rendering component -->
<!-- (unknown path)
TypeError: Cannot read properties of undefined (reading 'startsWith') -->
<!-- Template render error: (unknown path)
TypeError: Cannot read properties of undefined (reading 'startsWith')
at Object._prettifyError (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/nunjucks/src/lib.js:32:11)
at /home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/nunjucks/src/environment.js:464:19
at Template.root [as rootRenderFunc] (eval at _compile (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:95:3)
at Template.render (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/nunjucks/src/environment.js:454:10)
at Environment.renderString (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/nunjucks/src/environment.js:313:17)
at Environment.tryCatcher (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/bluebird/js/release/util.js:16:23)
at Environment.ret [as renderStringAsync] (eval at makeNodePromisifiedEval (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/bluebird/js/release/promisify.js:184:12), <anonymous>:14:23)
at NunjucksAdapter.render (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/@frctl/nunjucks/src/adapter.js:96:28)
at ComponentSource._renderVariant (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/@frctl/fractal/src/api/components/source.js:212:30)
at _renderVariant.next (<anonymous>)
at onFulfilled (/home/runner/work/AFW_PatternLab/AFW_PatternLab/node_modules/co/index.js:65:19) -->
<div class="homepage-slider{{modifierClasses|lspace}}">
<div class="homepage-slider__wrapper">
<div class="homepage-slider__slider slick-slider">
{% for slide in slides %}
{% if images %}
<div class="anywhereslider-slide picture-slide slick-slide">
<a href="{{slide.href}}">
<picture>
{% for image in images %}
{% if image.query %}
<source media="{{image.query|safe}}" srcset="{{image.src|path}}" alt="{{image.alt}}">
{% else %}
<img src="{{image.src|path}}" alt="{{image.alt}}">
{% endif %}
{% endfor %}
</picture>
</a>
</div>
{% else %}
<div class="anywhereslider-slide picture-slide slick-slide">
<a href="{{slide.href}}">
<img src="{{slide.image.src|path}}" alt="{{slide.image.alt}}">
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{
"slides": [
{
"href": "#",
"images": [
{
"src": "/images/slider/homepage/0194983_labor_day_homepage_mobile_banner_500_400.jpeg",
"alt": "Labor Day - Start Saving!",
"query": "(max-width:768px)"
},
{
"src": "/images/slider/homepage/0194982_labor_day_homepage_banner_1920x672.jpeg",
"alt": "Labor Day - Start Saving!"
}
]
},
{
"href": "#",
"image": {
"src": "/images/slider/homepage/0187713_Home Page Slider- In stock (4).jpeg",
"alt": "Buy Online, Pickup In Store!"
}
},
{
"href": "#",
"image": {
"src": "/images/slider/homepage/0193930_38585-01-SEA-AFW-Kempton-EVG-Campaign-Assets-Apr24_Homepage_Banner_1920x672_A_02.jpeg",
"alt": "Trouble sleeping? Sealy Ad"
}
},
{
"href": "#",
"image": {
"src": "/images/slider/homepage/0192186_patio_slider_1920x672.jpeg",
"alt": "Great buys on patio at AFW!"
}
},
{
"href": "#",
"image": {
"src": "/images/slider/homepage/0152918_1920x672_gift_card-min.jpeg",
"alt": "AFW Gift Cards"
}
},
{
"href": "#",
"image": {
"src": "/images/slider/homepage/0134332_1920x672_AFW-Financing-2-min.jpeg",
"alt": "Apply Now For Furniture Financing!"
}
}
]
}
$(document).ready(() => {
$('.homepage-slider .slick-slider').slick({
dots: true,
swipe: false,
arrows: true,
autoplay: true,
prevArrow: '<button type="button" class="slick-prev"><i class="far fa-chevron-left" aria-hidden="true"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="far fa-chevron-right" aria-hidden="true"></i></button>',
slidesToShow: 1,
slidesToScroll: 1,
})
})
.homepage-slider {
.slick-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0;
text-align: center;
margin: 1rem auto;
padding: 0;
position: relative;
bottom: unset;
height: 0;
li {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 6px;
position: relative;
top: -35px;
width: calc(75px + 12px) !important;
height: 4px !important;
button {
background: #FFFFFF;
border: none;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(black, 0.3);
font-size: 0;
margin: 0;
padding: 0;
width: 75px !important;
height: 4px !important;
&:before {
display: none;
}
}
&.slick-active {
button {
background: #446CC9;
}
}
}
}
.slick-prev,
.slick-next {
z-index: 10;
width: 60px;
height: 60px;
&:before {
font-size: 60px;
}
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
}
The Homepage Slider is…
| Device | Dimensions |
|---|---|
| Mobile | 500×400 |
| Desktop | 1920×672 |