Sliders
Carousel slider
Slider #1
“We do furniture and design for many different environments. At home, public spaces, professional spaces, and all the spaces in between.”
Mette Hay
“We do furniture and design for many different environments. At home, public spaces, professional spaces, and all the spaces in between.”
Mette Hay
“We do furniture and design for many different environments. At home, public spaces, professional spaces, and all the spaces in between.”
Mette Hay
<div class="py-lg-10 bg-dark px-3
py-6">
<div class="container">
<div class="row
justify-content-center">
<div class="col-lg-6">
<div class="swiper-container swiper
swiper-pagination-light pb-8 pb-lg-0"
id="swiper-6" data-pagination-type="" data-speed="800"
data-space-between="100" data-pagination="true"
data-navigation="true" data-autoplay="true"
data-effect="slide" data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView":
2}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView":
1}}'>
<div class="swiper-wrapper
pb-lg-10">
<div class="swiper-slide">
<div class="text-center">
<p class="text-white fs-2">“We do furniture and
design for many different
environments. At home,
public
spaces, professional spaces, and all the
spaces in between.”</p>
<div class="mt-6">
<img src="../../assets/images/avatar/avatar-13.jpg"
alt=""
class="avatar avatar-md
rounded-circle mb-2" />
<p class="mb-0 lh-1 text-white">Mette Hay
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="text-center">
<p class="text-white fs-2">“We do furniture and
design for many different
environments. At home,
public
spaces, professional spaces, and all the
spaces in between.”</p>
<div class="mt-6">
<img src="../../assets/images/avatar/avatar-13.jpg"
alt=""
class="avatar avatar-md
rounded-circle mb-2" />
<p class="mb-0 lh-1 text-white">Mette Hay
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="text-center">
<p class="text-white fs-2">“We do furniture and
design for many different
environments. At home,
public
spaces, professional spaces, and all the
spaces in between.”</p>
<div class="mt-6">
<img src="../../assets/images/avatar/avatar-13.jpg"
alt=""
class="avatar avatar-md
rounded-circle mb-2" />
<p class="mb-0 lh-1 text-white">Mette Hay
</p>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination mb-3
"></div>
<!-- Add Navigation -->
<div
class="swiper-navigation
position-absolute start-50 bottom-0 mb-4">
<div
class="swiper-button-next btn
btn-icon btn-sm btn-outline-white rounded-circle ms-8">
</div>
<div
class="swiper-button-prev btn
btn-icon btn-sm btn-outline-white rounded-circle me-8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>Slider #2
<div class="row">
<div class="col-lg-6">
<div class="row g-4">
<div class="swiper-container swiper
col-md-10 order-1"
data-thumbs="true" id="swiper-1" data-pagination-type=""
data-speed="400" data-space-between="100"
data-pagination="false" data-navigation="false"
data-autoplay="false" data-effect="fade"
data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView":
1}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView":
1}}'>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../../assets/images/product/product-single-img1.jpg"
data-zoom="../../assets/images/product/product-single-img1.jpg"
alt="Preview" class="drift imgLoop
img-fluid"
data-zoom-options='{
"paneSelector": "#zoomPane",
"hoverDelay": 500,
"touchDisable": true
}' />
</div>
<div class="swiper-slide">
<img src="../../assets/images/product/product-single-img2.jpg"
data-zoom="../../assets/images/product/product-single-img2.jpg"
alt="Preview" class="drift imgLoop
img-fluid"
data-zoom-options='{
"paneSelector": "#zoomPane",
"hoverDelay": 500,
"touchDisable": true
}' />
</div>
<div class="swiper-slide">
<img src="../../assets/images/product/product-single-img3.jpg"
data-zoom="../../assets/images/product/product-single-img3.jpg"
alt="Preview" class="drift imgLoop
img-fluid"
data-zoom-options='{
"paneSelector": "#zoomPane",
"hoverDelay": 500,
"touchDisable": true
}' />
</div>
<div class="swiper-slide">
<img src="../../assets/images/product/product-single-img4.jpg"
data-zoom="../../assets/images/product/product-single-img4.jpg"
alt="Preview" class="drift imgLoop
img-fluid"
data-zoom-options='{
"paneSelector": "#zoomPane",
"hoverDelay": 500,
"touchDisable": true
}' />
</div>
<!-- Add more slides as needed
-->
</div>
</div>
<!-- Thumbs Swiper Container
-->
<div class="swiper-container
swiper-thumbs col-md-2 order-2">
<div
class="swiper-wrapper d-flex
flex-row flex-md-column h-auto gap-md-4">
<div class="swiper-slide w-md-100">
<div class="ratio ratio-1x1
border">
<img src="../../assets/images/product/product-single-img1.jpg"
alt="product image" class="" />
</div>
</div>
<div class="swiper-slide w-md-100">
<div class="ratio ratio-1x1
border">
<img src="../../assets/images/product/product-single-img2.jpg"
alt="product image" class="" />
</div>
</div>
<div class="swiper-slide w-md-100">
<div class="ratio ratio-1x1
border">
<img src="../../assets/images/product/product-single-img3.jpg"
alt="product image" class="" />
</div>
</div>
<div class="swiper-slide w-md-100">
<div class="ratio ratio-1x1
border">
<img src="../../assets/images/product/product-single-img4.jpg"
alt="product image" class="" />
</div>
</div>
<!-- Add more thumbnails as needed
-->
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ps-lg-6">
<div class="position-relative" id="zoomPane">
</div>
</div>
</div>
</div>Slider #3
<div class="swiper-container swiper
px-3" id="swiper-3"
data-pagination-type="progressbar" data-speed="400" data-space-between="30"
data-pagination="true" data-navigation="true" data-autoplay="false"
data-effect="slides" data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView":
2}, "768": {"slidesPerView": 3}, "1024": {"slidesPerView": 4},
"1400": {"slidesPerView": 6}}'>
<div class="swiper-wrapper pb-10">
<div class="swiper-slide">
<div class="product-card">
<div class=" text-center
product-card-img mb-4">
<a href="#!"><img
src="../../assets/images/product/product-img-1.jpg"
alt="product image" class="img-fluid">
<img src="../../assets/images/product/product-img-hover-1.jpg"
alt="product image"
class="img-fluid
product-img-hover"></a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Sofa with wood legs"
data-product-price="34.00"
data-product-img="../../assets/images/product/product-img-1.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
Quick add
</button>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.3
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">Sofa with
wood
legs</a>
</h3>
<p class="mb-0 lh-1">$34.00</p>
</div>
<div role="group" aria-label="Basic radio toggle button
group">
<input type="radio" class="btn-check" name="btnradio"
id="btnradio1">
<label class="btn-color-swatch
bg-primary"
for="btnradio1"></label>
<input type="radio" class="btn-check" name="btnradio"
id="btnradio2">
<label class="btn-color-swatch
bg-success"
for="btnradio2"></label>
<input type="radio" class="btn-check" name="btnradio"
id="btnradio3" checked>
<label class="btn-color-swatch
bg-danger"
for="btnradio3"></label>
<input type="radio" class="btn-check" name="btnradio"
id="btnradio4">
<label class="btn-color-swatch
bg-info"
for="btnradio4"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!">
<img src="../../assets/images/product/product-img-2.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-2.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/>
</a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Floor Lamp"
data-product-price="95.00"
data-product-img="../../assets/images/product/product-img-2.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.2
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">Floor
Lamp</a>
</h3>
<p class="mb-0 lh-1">$95.00</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio2"
id="btnradio5" checked />
<label class="btn-color-swatch
bg-primary"
for="btnradio5"></label>
<input type="radio" class="btn-check" name="btnradio2"
id="btnradio6" />
<label class="btn-color-swatch
bg-success"
for="btnradio6"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!">
<img src="../../assets/images/product/product-img-3.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-3.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/>
</a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Comfort Seat Chair"
data-product-price="78.00"
data-product-img="../../assets/images/product/product-img-3.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
<div class="position-absolute top-0
p-2 px-3">
<span class="badge bg-info">New</span>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.3
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">Comfort Seat
Chair</a>
</h3>
<p class="mb-0 lh-1">$78.00</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio3"
id="btnradio9" checked>
<label class="btn-color-swatch
bg-primary"
for="btnradio9"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!"><img
src="../../assets/images/product/product-img-4.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-4.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/></a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Armchair"
data-product-price="75.00"
data-product-img="../../assets/images/product/product-img-4.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.5
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">Armchair</a>
</h3>
<p class="mb-0 lh-1">
<span class="text-danger">$75.00</span>
<span class="text-decoration-line-through">$95.00</span>
</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio4"
id="btnradio13" checked />
<label class="btn-color-swatch
bg-primary"
for="btnradio13"></label>
<input type="radio" class="btn-check" name="btnradio4"
id="btnradio14" />
<label class="btn-color-swatch
bg-success"
for="btnradio14"></label>
<input type="radio" class="btn-check" name="btnradio4"
id="btnradio16" />
<label class="btn-color-swatch
bg-info"
for="btnradio16"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!">
<img src="../../assets/images/product/product-img-5.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-5.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/>
</a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="High Back Boss Chair"
data-product-price="55.00"
data-product-img="../../assets/images/product/product-img-5.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.2
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">High
Back Boss
Chair</a>
</h3>
<p class="mb-0 lh-1">
<span>$55.00</span>
</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio5"
id="btnradio17" checked />
<label class="btn-color-swatch
bg-primary"
for="btnradio17"></label>
<input type="radio" class="btn-check" name="btnradio5"
id="btnradio27" />
<label class="btn-color-swatch
bg-success"
for="btnradio27"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!"><img
src="../../assets/images/product/product-img-6.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-6.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/></a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Fancy Metal Wall
Clock"
data-product-price="35.00"
data-product-img="../../assets/images/product/product-img-6.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
<div class="position-absolute top-0
p-2 px-3">
<span class="badge bg-danger">On Sale</span>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.5
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">
Fancy Metal Wall
Clock
</a>
</h3>
<p class="mb-0 lh-1">
<span class="text-danger">$35.00</span>
<span class="text-decoration-line-through">$45.00</span>
</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio6"
id="btnradio21" checked />
<label class="btn-color-swatch
bg-primary"
for="btnradio21"></label>
<input type="radio" class="btn-check" name="btnradio6"
id="btnradio22" />
<label class="btn-color-swatch
bg-success"
for="btnradio22"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!">
<img src="../../assets/images/product/product-img-7.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-7.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/>
</a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Modern metal frame
stool"
data-product-price="85.00"
data-product-img="../../assets/images/product/product-img-7.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.5
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">Modern metal
frame stool</a>
</h3>
<p class="mb-0 lh-1">
<span>$85.00</span>
</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio7"
id="btnradio18" checked />
<label class="btn-color-swatch
bg-success"
for="btnradio18"></label>
<input type="radio" class="btn-check" name="btnradio7"
id="btnradio19" />
<label class="btn-color-swatch
bg-danger"
for="btnradio19"></label>
<input type="radio" class="btn-check" name="btnradio7"
id="btnradio20" />
<label class="btn-color-swatch
bg-info"
for="btnradio20"></label>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="product-card">
<div class="text-center mb-4
product-card-img">
<a href="#!">
<img src="../../assets/images/product/product-img-9.jpg"
alt="product image" class="img-fluid" />
<img src="../../assets/images/product/product-img-hover-9.jpg"
alt="product image"
class="img-fluid
product-img-hover"
/>
</a>
<div class="product-card-btn">
<button type="button"
class="btn btn-primary btn-icon
btn-sm animate-pulse "
data-bs-toggle="modal"
data-bs-target="#quickViewModal">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-eye
animate-target"
viewBox="0 0 16 16">
<path
d="M16 8s-3-5.5-8-5.5S0 8 0
8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12
4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828
8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332
10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172
8z" />
<path
d="M8 5.5a2.5 2.5 0 1 0 0 5
2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
</svg>
</button>
<button type="button"
class="btn btn-primary btn-sm
quick-add-btn"
data-product-name="Divine Trends Table
Lamp"
data-product-price="70.00"
data-product-img="../../assets/images/product/product-img-9.jpg">
<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" fill="currentColor"
class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
Quick add
</button>
</div>
</div>
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span class="small fw-medium
text-uppercase">BRAND</span>
<div class="d-flex gap-3
align-items-center">
<span class="">
4.5
<svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<button type="button"
class="btn btn-light
bg-transparent border-0 p-0 animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor"
class="bi bi-heart
animate-target"
viewBox="0 0 16 16">
<path
d="m8 2.748-.717-.737C5.6.281
2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815
2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542
6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28
8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824
1.143q.09.083.176.171a3 3 0 0 1 .176-.17C12.72-3.042 23.333
4.867 8 15" />
</svg>
</button>
</div>
</div>
<div class="mb-3">
<h3
class="fs-6 mb-0 product-heading
d-inline-block text-truncate">
<a href="#!">
Divine Trends
Table Lamp
</a>
</h3>
<p class="mb-0 lh-1">
<span>$70.00</span>
</p>
</div>
<div>
<input type="radio" class="btn-check" name="btnradio8"
id="btnradio23" checked />
<label class="btn-color-swatch
bg-primary"
for="btnradio23"></label>
<input type="radio" class="btn-check" name="btnradio8"
id="btnradio24" />
<label class="btn-color-swatch
bg-success"
for="btnradio24"></label>
<input type="radio" class="btn-check" name="btnradio8"
id="btnradio25" />
<label class="btn-color-swatch
bg-danger"
for="btnradio25"></label>
</div>
</div>
</div>
<!-- Add more slides as needed
-->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination top-100
mt-n4 start-lg-10 w-lg-75"></div>
<!-- Add Navigation -->
<div
class="swiper-navigation
position-absolute end-10 bottom-0 mb-4 d-none d-lg-block">
<div class="swiper-button-next btn
btn-icon btn-sm btn-outline-primary rounded-circle"
id="slide2">
</div>
<div class="swiper-button-prev me-2
btn btn-icon btn-sm btn-outline-primary rounded-circle"
id="slide1">
</div>
</div>
</div>Sliders #4
<div class="row gy-4">
<div class="col-lg-6">
<div class="position-relative">
<img src="../../assets/images/shop/shop-room-1.jpg"
alt="shop room" class="img-fluid" />
<a id="hint1" href="#!"
class="btn btn-icon btn-sm
btn-white rounded-circle pulse-button position-absolute
bottom-50 end-25 hint2"
data-bs-toggle="popover" data-bs-html="true"
data-bs-trigger="focus" data-bs-placement="right"
data-bs-content='<div class="d-flex
align-items-center gap-3">
<div>
<img src="../../assets/images/shop/shop-look-img-5.jpg"
alt="shop look" />
</div>
<div>
<h3 class="fs-6 mb-1 ">Designer Sofa</h3>
<span>$259.00</span>
<a href="#!" class="text-link">+Add to cart</a>
</div>
</div>'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
</a>
<a id="hint2" href="#!"
class="btn btn-icon btn-sm
btn-white rounded-circle pulse-button position-absolute
bottom-50 start-25 hint"
data-bs-toggle="popover" data-bs-html="true"
data-bs-trigger="focus" data-bs-placement="right"
data-bs-content='<div class="d-flex
align-items-center gap-3">
<div>
<img src="../../assets/images/shop/shop-look-img-2.jpg"
alt="shop look" />
</div>
<div>
<h3 class="fs-6 mb-1 ">Flower Pot</h3>
<span>$259.00</span>
<a href="#!" class="text-link">+Add to cart</a>
</div>
</div>'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1
.5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1
0-1h3v-3A.5.5 0 0 1 8 4" />
</svg>
</a>
</div>
</div>
<div class="offset-lg-1 col-lg-4">
<div class="swiper-container
swiper" id="swiper-2"
data-pagination-type="" data-speed="400" data-space-between="100"
data-pagination="false" data-navigation="true" data-autoplay="false"
data-effect="slides" data-autoplay-delay="3000"
data-breakpoints='{"480": {"slidesPerView":
2}, "768": {"slidesPerView": 1}, "1024": {"slidesPerView":
1}}'>
<div class="swiper-wrapper pb-6">
<div class="swiper-slide">
<div class="">
<img src="../../assets/images/shop/shop-room-1.jpg"
alt="shop room" class="img-fluid mb-4" />
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span
class="small fw-medium
text-uppercase">BRAND</span>
<span class="">
4.3
<svg xmlns="http://www.w3.org/2000/svg"
width="12" height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
</span>
</div>
<div>
<h3 class="fs-6 mb-1 text-link
d-inline-block">
Stylish Wooden Table Lamp</h3>
<p class="mb-0 lh-1">$78.00</p>
</div>
</div>
</div>
<div class="swiper-slide mb-5">
<div class="">
<img src="../../assets/images/shop/shop-room-1.jpg"
alt="shop room" class="img-fluid mb-4" />
<div
class="d-flex
justify-content-between align-items-center mb-2">
<span
class="small fw-medium
text-uppercase">BRAND</span>
<span class="">
4.3
<svg xmlns="http://www.w3.org/2000/svg"
width="12" height="12" fill="currentColor"
class="bi bi-star-fill
align-baseline text-warning"
viewBox="0 0 16 16">
<path
d="M3.612
15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173
6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927
0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83
4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
</span>
</div>
<div>
<h3 class="fs-6 mb-1 text-link
d-inline-block">
Stylish Wooden Table Lamp</h3>
<p class="mb-0 lh-1">$78.00</p>
</div>
</div>
</div>
<!-- Add more slides as needed
-->
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div
class="swiper-navigation
position-absolute end-50 bottom-0 mb-4">
<div class="swiper-button-next btn
btn-icon btn-sm btn-outline-primary rounded-circle slide"
data-hint-id="hint1"></div>
<div class="swiper-button-prev me-2
btn btn-icon btn-sm btn-outline-primary rounded-circle
slide"
data-hint-id="hint2"></div>
</div>
</div>
</div>
</div>