Authors Carousel
Authors Carousel #v1
Favorite Authors
View All
<div class="container">
<header class="d-md-flex justify-content-between align-items-center mb-8">
<h2 class="font-size-7 mb-3 mb-md-0">Favorite Authors</h2>
<a href="#" class="h-primary d-block">View All <i class="glyph-icon flaticon-next"></i></a>
</header>
<ul class="row rows-cols-5 no-gutters authors list-unstyled js-slick-carousel u-slick"
data-slides-show="5"
data-arrows-classes="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-responsive='[{
"breakpoint": 1025,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Barbara O'Neil</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Stephen King</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">David Walliams</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Joe Wicks</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Jessica Simpson</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">David Walliams</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Joe Wicks</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Barbara O'Neil</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
</ul>
</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>
Authors Carousel #v2
<div class="bg-gray-200 space-1">
<div class="container">
<header class="text-center mb-lg-7">
<h2 class="font-size-7 mb-5 mb-lg-0">Favorite Authors</h2>
</header>
<ul class="row rows-cols-5 no-gutters authors list-unstyled js-slick-carousel u-slick"
data-slides-show="5"
data-arrows-classes="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-responsive='[{
"breakpoint": 1025,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 2
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 1
}
}, {
"breakpoint": 554,
"settings": {
"slidesToShow": 1
}
}]'>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Barbara O'Neil</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Stephen King</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">David Walliams</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Joe Wicks</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Jessica Simpson</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">David Walliams</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Joe Wicks</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</li>
<li class="author col">
<a href="#" class="text-reset">
<img src="https://placehold.it/142x142" class="mx-auto mb-5 d-block rounded-circle img-fluid" alt="image-description">
<div class="author__body text-center">
<h2 class="author__name h6 mb-0">Barbara O'Neil</h2>
<div class="text-gray-700 font-size-2">25 Published Books</div>
</div>
</a>
</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>
Authors Sidebar #v1
Favourite Authors
Barbara O'Neal
21,658 Published BooksStephen King
21,658 Published BooksDavid Walliams
21,658 Published BooksJoe Wicks
21,658 Published BooksJessica Simpson
21,658 Published Books
<div class="container space-1">
<h2 class="font-size-26 mb-4">Favourite Authors</h2>
<div class="px-4 pt-4 border mb-5">
<div class="media mb-6 align-items-center">
<a class="d-block" href="#">
<img class="img-fluid rounded-circle" src="https://placehold.it/80x80" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal mb-0">
<a href="#">Barbara O'Neal</a>
</h6>
<span class="text-secondary-gray-700 font-size-2">21,658 Published Books</span>
</div>
</div>
<div class="media mb-6 align-items-center">
<a class="d-block" href="#">
<img class="img-fluid rounded-circle" src="https://placehold.it/80x80" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal mb-0">
<a href="#">Stephen King</a>
</h6>
<span class="text-secondary-gray-700 font-size-2">21,658 Published Books</span>
</div>
</div>
<div class="media mb-6 align-items-center">
<a class="d-block" href="#">
<img class="img-fluid rounded-circle" src="https://placehold.it/80x80" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal mb-0">
<a href="#">David Walliams</a>
</h6>
<span class="text-secondary-gray-700 font-size-2">21,658 Published Books</span>
</div>
</div>
<div class="media mb-6 align-items-center">
<a class="d-block" href="#">
<img class="img-fluid rounded-circle" src="https://placehold.it/80x80" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal mb-0">
<a href="#">Joe Wicks</a>
</h6>
<span class="text-secondary-gray-700 font-size-2">21,658 Published Books</span>
</div>
</div>
<div class="media mb-6 align-items-center">
<a class="d-block" href="#">
<img class="img-fluid rounded-circle" src="https://placehold.it/80x80" alt="Image-Description">
</a>
<div class="media-body ml-3 pl-1">
<h6 class="crop-text-2 text-lh-md font-weight-normal mb-0">
<a href="#">Jessica Simpson</a>
</h6>
<span class="text-secondary-gray-700 font-size-2">21,658 Published Books</span>
</div>
</div>
</div>
</div>