Product Carousel Blocks
Start building your website with ready-to-use product blocks.
Carousel #v1
Biographies Books
View All
<div class="container space-2">
<header class="mb-5 d-md-flex justify-content-between align-items-center">
<h2 class="font-size-7 mb-3 mb-md-0">Biographies Books</h2>
<a href="#" class="h-primary d-block">View All <i class="glyph-icon flaticon-next"></i></a>
</header>
<div class="js-slick-carousel u-slick products border"
data-pagi-classes="text-center u-slick__pagination mt-md-8 mt-4 position-absolute right-0 left-0"
data-slides-show="3"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #v2
Biographies Book
View AllHard Cover
The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm
Hillary Burton
$15
Hard Cover
The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm
Hillary Burton
$15
Hard Cover
The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm
Hillary Burton
$15
Hard Cover
The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm
Hillary Burton
$15
Hard Cover
The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm
Hillary Burton
$15
<div class="container space-top-2">
<header class="border-bottom d-md-flex justify-content-between align-items-center mb-8 pb-4d75">
<h2 class="font-size-7 mb-3 mb-md-0">Biographies Book</h2>
<a href="#" class="h-primary d-block">View All <i class="glyph-icon flaticon-next"></i></a>
</header>
<div class="js-slick-carousel u-slick products"
data-pagi-classes="text-center u-slick__pagination mt-8"
data-slides-show="3"
data-responsive='[{
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product product__card product__card-v2 border-right">
<div class="media p-3 p-md-4d875">
<img src="https://placehold.it/120x183" alt="image-description">
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">Hard Cover</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card product__card-v2 border-right">
<div class="media p-3 p-md-4d875">
<img src="https://placehold.it/120x183" alt="image-description">
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">Hard Cover</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card product__card-v2 border-right">
<div class="media p-3 p-md-4d875">
<img src="https://placehold.it/120x183" alt="image-description">
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">Hard Cover</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card product__card-v2 border-right">
<div class="media p-3 p-md-4d875">
<img src="https://placehold.it/120x183" alt="image-description">
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">Hard Cover</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card product__card-v2 border-right">
<div class="media p-3 p-md-4d875">
<img src="https://placehold.it/120x183" alt="image-description">
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">Hard Cover</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #v3
Bestselling Books
View All
<div class="container space-top-2">
<header class="mb-5 d-md-flex justify-content-between align-items-center">
<h2 class="font-size-7 mb-3 mb-md-0">Bestselling Books</h2>
<a href="#" class="h-primary d-block">View All <i class="glyph-icon flaticon-next"></i></a>
</header>
<div class="js-slick-carousel products no-gutters border-top border-left border-right"
data-pagi-classes="d-xl-none text-center position-absolute right-0 left-0 u-slick__pagination mt-4 mb-0"
data-arrows-classes="d-none d-xl-block u-slick__arrow u-slick__arrow-centered--y"
data-arrow-left-classes="fas fa-chevron-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n10"
data-arrow-right-classes="fas fa-chevron-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n10"
data-slides-show="5"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 4
}
},{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #v4
Most Popular Book
<div class="container">
<header class="border-bottom mb-8d75 pb-4d75">
<h2 class="font-size-7 mb-0">Most Popular Book</h2>
</header>
<div class="js-slick-carousel products list-unstyled no-gutters my-0"
data-pagi-classes="d-lg-none text-center u-slick__pagination u-slick__pagination mt-5 mb-0"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-chevron-left u-slick__arrow-inner u-slick__arrow-inner--left ml-xl-n10"
data-arrow-right-classes="fas fa-chevron-right u-slick__arrow-inner u-slick__arrow-inner--right mr-xl-n10"
data-slides-show="5"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<!-- <div class="product__rating d-flex align-items-center font-size-2">
<div class="text-warning mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div> -->
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #v5
Children's Bestselling Books
<div class="space-top-2">
<div class="container">
<header class="mb-5">
<h2 class="font-size-7 mb-0">Children's Bestselling Books</h2>
</header>
<ul class="js-slick-carousel products list-unstyled u-slick--gutters-3 my-0"
data-pagi-classes="d-xl-none text-center u-slick__pagination mb-0 mt-3 mt-lg-5"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y border-0 h-dark-white"
data-arrow-left-classes="fas flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n10"
data-arrow-right-classes="fas flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n10"
data-slides-show="6"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 1199,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space product__space-primary border rounded-md bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel #v6
<div class="bg-gray-200">
<div class="container-fluid bg-white">
<ul class="slider-product js-slick-carousel u-slick u-slick--gutters-3 mb-0 space-bottom-2 px-1 px-md-3"
data-pagi-classes="text-center u-slick__pagination u-slick__pagination mb-0 mt-3 mt-lg-5"
data-slides-show="4"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="bg-indigo-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular"><a href="#">Nightingale</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
<li class="bg-tangerine-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular"><a href="#">Mermaids</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
<li class="bg-chili-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular crop-text-2"><a href="#">The Hideaway</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
<li class="bg-carolina-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular crop-text-2"><a href="#">The Hideaway</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
<li class="bg-tangerine-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular"><a href="#">Mermaids</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
<li class="bg-indigo-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular"><a href="#">Nightingale</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
<li class="bg-carolina-light p-4 p-md-5 rounded-md">
<div class="d-md-flex align-items-center">
<div class="mb-4 mb-md-0">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h6 class="woocommerce-loop-product__title product__title h-dark font-weight-regular crop-text-2"><a href="#">The Hideaway</a></h6>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>41</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2 mb-4">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart mr-3">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
<div class="ml-auto">
<img src="https://placehold.it/150x225" class="img-fluid" alt="image-description">
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Sidebar
Featured Books
Coming Soon
<div class="container">
<div class="row">
<div class="col-lg-4 mb-6 mb-lg-0">
<header class="mb-5">
<h2 class="font-size-7 mb-0">Featured Books</h2>
</header>
<div class="product product__card border rounded-md mb-5">
<div class="media p-4d875">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183">
</a>
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">
<a href="#">Hard Cover</a>
</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a>
</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
</div>
</div>
<div class="product product__card border rounded-md">
<div class="media p-4d875">
<a class="d-block" href="#">
<img src="https://placehold.it/120x183">
</a>
<div class="media-body ml-4d875">
<div class="text-primary text-uppercase font-size-1 mb-1 text-truncate">
<a href="#">Hard Cover</a>
</div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2">
<a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a>
</h2>
<div class="font-size-2 text-gray-700 mb-1 text-truncate">Hillary Burton</div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<header class="mb-5">
<h2 class="font-size-7 mb-0">Coming Soon</h2>
</header>
<ul class=" mb-0 js-slick-carousel u-slick u-slick--gutters-3 pl-0 products"
data-pagi-classes="text-center u-slick__pagination u-slick__pagination mt-5 pt-1 mb-0"
data-slides-show="3"
data-responsive='[{
"breakpoint": 767,
"settings": {
"slidesToShow": 2
}
}]'>
<li class="product product__space border rounded-md py-3">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Camino Winds</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>9</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border rounded-md py-3">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">hardcover</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Until the End of Time: Mind, Matter</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>89</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border rounded-md py-3">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border rounded-md py-3">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border rounded-md py-3">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border rounded-md py-3">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>37</span>
</div>
<div class="product__rating d-none align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-dark border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Banner
<div class="container">
<div class="row align-items-center space-bottom-3">
<div class="col-md-5 col-lg-4 col-xl-3 mb-4 mb-md-0">
<div class="bg-img-hero min-height-440 rounded" style="background-image: url(https://placehold.it/300x440);">
<div class="p-5">
<h4 class="font-size-22">Romance</h4>
<p>Lorem ipsum dolor consectetu eiusmo tempor ametsum.</p>
<a href="#" class="text-dark font-weight-medium text-uppercase stretched-link">View All</a>
</div>
</div>
</div>
<div class="col-md-7 col-lg-8 col-xl-9">
<div class="mx-lg-8 mx-wd-4">
<div class="js-slick-carousel products no-gutters"
data-pagi-classes="d-lg-none text-center u-slick__pagination u-slick__pagination mt-5 mb-0"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-chevron-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n8 ml-wd-n4"
data-arrow-right-classes="fas fa-chevron-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n8 mr-wd-n4"
data-slides-show="4"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<!-- <div class="product__rating d-flex align-items-center font-size-2">
<div class="text-warning mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div> -->
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-5 col-lg-4 col-xl-3 mb-4 mb-md-0">
<div class="bg-img-hero min-height-440 rounded" style="background-image: url(https://placehold.it/300x440);">
<div class="p-5">
<h4 class="font-size-22">Health</h4>
<p>Lorem ipsum dolor consectetu eiusmo tempor ametsum.</p>
<a href="#" class="text-dark font-weight-medium text-uppercase stretched-link">View All</a>
</div>
</div>
</div>
<div class="col-md-7 col-lg-8 col-xl-9">
<div class="mx-lg-8 mx-wd-4">
<div class="js-slick-carousel products no-gutters"
data-pagi-classes="d-lg-none text-center u-slick__pagination u-slick__pagination mt-5 mb-0"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y rounded-circle"
data-arrow-left-classes="fas fa-chevron-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n8 ml-wd-n4"
data-arrow-right-classes="fas fa-chevron-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n8 mr-wd-n4"
data-slides-show="4"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<!-- <div class="product__rating d-flex align-items-center font-size-2">
<div class="text-warning mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div> -->
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product product__no-border border-right">
<div class="product__inner overflow-hidden px-3 px-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary-green border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Banner #v2
Most Popular For Food and Drink Books
Discount On Food and Drinks Books
Shop Now
<div class="container">
<h6 class="font-size-7 font-weight-medium mb-5">Most Popular For Food and Drink Books</h6>
<div class="row">
<div class="col-lg-5">
<div class="mb-8 mb-lg-0">
<div class="bg-img-hero img-fluid height-373" style="background-image: url(../../assets/img/1076x761/img1.jpg);">
<div class="p-5 pl-lg-6 pr-lg-5 pt-lg-5 pb-lg-5">
<div class="mb-4 mb-lg-2">
<h2 class="font-size-26 mb-2 pb-1 mt-lg-1">
<span class="hero__title-line-1 font-weight-bold d-block mb-2">Discount On</span>
<span class="hero__title-line-2 font-weight-normal d-block">Food and Drinks Books</span>
</h2>
<a class="h6 font-weight-medium link-black-100" href="#">Shop Now</a>
</div>
<div class="d-flex justify-content-end">
<img src="https://placehold.it/260x200" class="img-fluid attachment-shop_catalog size-shop_catalog wp-post-image">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="position-relative pt-6 pt-lg-0">
<div class="js-slick-carousel products no-gutters border-top border-left border-right position-static"
data-arrows-classes="d-none d-lg-block position-absolute right-0 top-0 mt-n5 mt-lg-n9 arrow-cursor"
data-arrow-left-classes="flaticon-back mr-5"
data-arrow-right-classes="flaticon-next"
data-pagi-classes="d-lg-none text-center u-slick__pagination u-slick__pagination"
data-slides-show="3"
data-responsive='[{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 992,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden bg-white p-3 p-md-4">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto" data-toggle="tooltip" data-placement="right" data-original-title="ADD TO CART">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Banner #v3
Children's Bestselling Books
Featured Books of the February
View More
<div class="banner mb-5">
<div class="container">
<header class="mb-5">
<h2 class="font-size-7 font-weight-medium">Children's Bestselling Books</h2>
</header>
<div class="bg-indigo-light px-xl-11 px-3 px-md-6 px-lg-5 py-6 py-xl-8 rounded-0">
<div class="media d-block d-lg-flex">
<div class="media-body align-self-center mb-4 mb-lg-0">
<p class="banner__pretitle text-uppercase text-gray-400 font-weight-bold">THE BOOKWORM EDITORS’</p>
<h2 class="hero__title font-size-10 mb-4">
<span class="hero__title-line-1 font-weight-regular d-block mb-1">Featured Books of the</span>
<span class="hero__title-line-2 font-weight-bold d-block">February</span>
</h2>
<a href="#" class="banner_btn rounded-0 btn btn-wide btn-primary-indigo text-white">View More</a>
</div>
<img src="https://placehold.it/450x235" class="img-fluid" alt="image-description">
</div>
</div>
</div>
</div>
<div class="container">
<div class="js-slick-carousel products no-gutters border-top border-left border-right"
data-pagi-classes="text-center position-absolute right-0 left-0 u-slick__pagination mt-4 mb-0"
data-arrows-classes="d-none u-slick__arrow u-slick__arrow-centered--y"
data-arrow-left-classes="fas fa-chevron-left u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n10"
data-arrow-right-classes="fas fa-chevron-right u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n10"
data-slides-show="5"
data-responsive='[{
"breakpoint": 1500,
"settings": {
"slidesToShow": 4
}
},{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
},{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
<div class="product">
<div class="product__inner overflow-hidden p-3 p-md-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/120x180" class="img-fluid d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Bg Color
Bestselling Books
View All
<div class="space-3 bg-gray-200">
<div class="container">
<header class="d-md-flex justify-content-between align-items-center mb-5">
<h2 class="font-size-26 mb-4 mb-md-0">Bestselling Books</h2>
<a href="#" class="d-flex align-items-center h-primary">View All<span class="flaticon-next font-size-3 ml-2"></span></a>
</header>
<ul class="js-slick-carousel products list-unstyled u-slick--gutters-3 my-0"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y"
data-arrow-left-classes="flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-n9"
data-arrow-right-classes="flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-n9"
data-slides-show="4"
data-responsive='[{
"breakpoint": 1199,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
<span class="badge badge-md badge-primary-green position-absolute badge-pos--top-right text-white rounded-circle d-flex flex-column align-items-center justify-content-center">21%
</span>
</div>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<div class="position-relative">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
<span class="badge badge-md badge-primary-green position-absolute badge-pos--top-right text-white rounded-circle d-flex flex-column align-items-center justify-content-center">21%
</span>
</div>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product border product__space bg-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/150x225" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 bg-white">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-flex align-items-center font-size-2">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Bg Color #2
Biographies Books
View All
<div class="bg-gray-200 space-2">
<div class="container">
<header class="mb-5 d-md-flex justify-content-between align-items-center">
<h2 class="font-size-7 mb-3 mb-md-0">Biographies Books</h2>
<a href="#" class="h-primary d-block">View All <i class="glyph-icon flaticon-next"></i></a>
</header>
<div class="js-slick-carousel u-slick u-slick--gutters-3 products"
data-pagi-classes="text-center u-slick__pagination mt-7 position-absolute right-0 left-0"
data-slides-show="3"
data-responsive='[{
"breakpoint": 1199,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card border-0">
<div class="media p-3 p-md-4d875 bg-white border">
<a href="#" class="d-block"><img src="https://placehold.it/120x183"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Bg Color #3
Featured Books
<div class="bg-gray-200 space-2">
<div class="container">
<div>
<header class="text-center mb-5 mb-lg-7">
<h2 class="font-size-7 mb-0">Featured Books</h2>
</header>
<ul class="js-slick-carousel products list-unstyled my-0"
data-arrows-classes="d-none d-lg-block u-slick__arrow u-slick__arrow-centered--y"
data-arrow-left-classes="fas flaticon-back u-slick__arrow-inner u-slick__arrow-inner--left ml-lg-4"
data-arrow-right-classes="fas flaticon-next u-slick__arrow-inner u-slick__arrow-inner--right mr-lg-4"
data-slides-show="5"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Kindle Edition</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Overdue Life of Amy Byler</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Kelly Harms</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
<li class="product product__space border bg-hover-white">
<div class="product__inner overflow-hidden p-4d875">
<div class="woocommerce-LoopProduct-link woocommerce-loop-product__link d-block position-relative">
<div class="woocommerce-loop-product__thumbnail">
<a href="#" class="d-block"><img src="https://placehold.it/115x180" class="d-block mx-auto attachment-shop_catalog size-shop_catalog wp-post-image img-fluid" alt="image-description"></a>
</div>
<div class="woocommerce-loop-product__body product__body pt-3 text-center">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Paperback</a></div>
<h2 class="woocommerce-loop-product__title product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">Think Like a Monk: Train Your Mind for Peace and Purpose Everyday</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Jay Shetty</a></div>
<div class="price d-flex align-items-center justify-content-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29</span>
</div>
<div class="product__rating d-md-flex align-items-center justify-content-center font-size-2 d-none">
<div class="text-yellow-darker mr-2">
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="fas fa-star"></small>
<small class="far fa-star"></small>
<small class="far fa-star"></small>
</div>
<div class="">(3,714)</div>
</div>
</div>
<div class="product__hover d-flex align-items-center">
<a href="#" class="text-uppercase text-dark h-dark font-weight-medium mr-auto">
<span class="product__add-to-cart">ADD TO CART</span>
<span class="product__add-to-cart-icon font-size-4"><i class="flaticon-icon-126515"></i></span>
</a>
<a href="#" class="mr-1 h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-switch"></i>
</a>
<a href="#" class="h-p-bg btn btn-outline-primary border-0">
<i class="flaticon-heart"></i>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>
Carousel with Bg Color #4
Biographies Books
<div class="bg-gray-200 space-2">
<div class="container">
<header class="text-center mb-5 mb-lg-7">
<h2 class="font-size-7 mb-0">Biographies Books</h2>
</header>
<div class="js-slick-carousel u-slick products border"
data-pagi-classes="text-center u-slick__pagination mt-md-8 mt-4 position-absolute right-0 left-0 mb-0"
data-slides-show="3"
data-responsive='[{
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
<div class="product product__card bg-hover-white border-right">
<div class="media p-3 p-md-4d875">
<a href="#" class="d-block"><img src="https://placehold.it/120x183" class="img-fluid" alt="image-description"></a>
<div class="media-body ml-4d875">
<div class="text-uppercase font-size-1 mb-1 text-truncate"><a href="#">Hard Cover</a></div>
<h2 class="woocommerce-loop-product__title h6 text-lh-md mb-1 text-height-2 crop-text-2 h-dark"><a href="#">The Rural Diaries: Love, Livestock, and Big Life Lessons Down on Mischief Farm</a></h2>
<div class="font-size-2 mb-1 text-truncate"><a href="#" class="text-gray-700">Hillary Burton</a></div>
<div class="price d-flex align-items-center font-weight-medium font-size-3">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>
<!-- JS Bookworm -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of slick carousel
$.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
});
</script>