<div class="product-slider ">
<div class="product-slider__wrapper">
<div class="product-slider__slider slick-slider">
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0191788_RANCH-LC.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Brook Ranch Lounge Chair</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$348.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(6 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0191856_P505-821-HEAD-ON.jpeg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Danson Swivel Lounge Chair</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$448.00</span>
<span class="price old-price">$548.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(13 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0108740_0108740_clare-view-outdoor-lounge-chair.jpeg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Clare View Outdoor Lounge Chair</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$328.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(49 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0186013_15186_1.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Agave - Wood and Woven Rope Lounge Chair, Gray *D</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$329.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(8 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0194274_FLYN-2PC.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Fynnegan Outdoor Loveseat with Table (Set of 2)</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$198.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(8 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0191069_WALTON-BS.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Walton Bridge Bar Stool</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$198.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(5 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0190268_PETAL-4PC.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Petal Road 4 Piece Sectional</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$748.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(20 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0189579_P114-835.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Hyland Wave Gliding Love Seat Natural</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$699.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(15 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0189573_P111-835.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Hyland Wave Gliding Love Seat White</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$699.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(3 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
<div class="product-slider__slide slick-slide">
<div class="product-card ">
<div class="product-card__picture">
<a href="#">
<img src="../../images/product/0177720_P008-813.jpg_400.jpeg" alt="Product Image">
</a>
<button class="product-card__wishlist">
<i class="wishlist-off far fa-heart" aria-hidden="true"></i>
<i class="wishlist-on fas fa-heart" aria-hidden="true"></i>
</button>
</div>
<div class="product-card__details">
<h3 class="product-card__title">
<a href="#">Sundown Treasure Adirondack Ottoman Black</a>
</h3>
<div class="product-card__info">
<div class="product-card__prices">
<span class="price actual-price">$68.00</span>
<span class="price old-price">$178.00</span>
</div>
<div class="product-card__rating">
<i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i>
<a href="#">(4 Reviews)</a>
</div>
<div class="product-card__buttons"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-slider {{modifierClasses}}">
<div class="product-slider__wrapper">
<div class="product-slider__slider slick-slider">
{% for slide in slides -%}
<div class="product-slider__slide slick-slide">
{% render '@product-card', slide, true %}
</div>
{%- endfor %}
</div>
</div>
</div>
{
"slides": [
{
"title": "Brook Ranch Lounge Chair",
"actualPrice": "$348.00",
"rating": {
"count": 6,
"average": 5
},
"image": {
"src": "/images/product/0191788_RANCH-LC.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Danson Swivel Lounge Chair",
"oldPrice": "$548.00",
"actualPrice": "$448.00",
"rating": {
"count": 13,
"average": 5
},
"image": {
"src": "/images/product/0191856_P505-821-HEAD-ON.jpeg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Clare View Outdoor Lounge Chair",
"actualPrice": "$328.00",
"rating": {
"count": 49,
"average": 5
},
"image": {
"src": "/images/product/0108740_0108740_clare-view-outdoor-lounge-chair.jpeg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Agave - Wood and Woven Rope Lounge Chair, Gray *D",
"actualPrice": "$329.00",
"image": {
"src": "/images/product/0186013_15186_1.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Fynnegan Outdoor Loveseat with Table (Set of 2)",
"oldPrice": "$178.00",
"actualPrice": "$198.00",
"rating": {
"count": 8,
"average": 5
},
"image": {
"src": "/images/product/0194274_FLYN-2PC.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Walton Bridge Bar Stool",
"actualPrice": "$198.00",
"rating": {
"count": 5,
"average": 5
},
"image": {
"src": "/images/product/0191069_WALTON-BS.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Petal Road 4 Piece Sectional",
"actualPrice": "$748.00",
"rating": {
"count": 20,
"average": 5
},
"image": {
"src": "/images/product/0190268_PETAL-4PC.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Hyland Wave Gliding Love Seat Natural",
"actualPrice": "$699.00",
"rating": {
"count": 15,
"average": 5
},
"image": {
"src": "/images/product/0189579_P114-835.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Hyland Wave Gliding Love Seat White",
"actualPrice": "$699.00",
"rating": {
"count": 3,
"average": 5
},
"image": {
"src": "/images/product/0189573_P111-835.jpg_400.jpeg",
"alt": "Product Image"
}
},
{
"title": "Sundown Treasure Adirondack Ottoman Black",
"actualPrice": "$68.00",
"rating": {
"count": 4,
"average": 5
},
"image": {
"src": "/images/product/0177720_P008-813.jpg_400.jpeg",
"alt": "Product Image"
}
}
]
}
$(document).ready(() => {
$('.product-slider .slick-slider').slick({
dots: false,
swipe: false,
arrows: true,
slidesToShow: 4,
slidesToScroll: 4,
})
})
.product-slider {
.slick-prev,
.slick-next {
color: $color-primary-text;
padding: rem(20px) rem(15px);
margin: unset;
width: unset;
height: unset;
transform: none;
position: relative;
left: unset;
right: unset;
&:before {
color: $color-primary-text;
}
&:hover {
background: $color-sky-lighter;
}
}
}
No notes defined.