Custom Carousel Widget to Display Catalog Items. Currently the catalog items, images, and links are hardcoded but this can be enhanced by either creating instance options or custom table to manage data.
HTML
<script type="text/javascript">
$(document).ready(function(){
$(".wish-icon i").click(function(){
$(this).toggleClass("fa-heart fa-heart-o");
});
});
</script>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="myCarousel1" class="carousel slide" data-ride="carousel" data-interval="0">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1"></li>
<li data-target="#myCarousel1" data-slide-to="2"></li>
<li data-target="#myCarousel1" data-slide-to="3"></li>
</ol>
<h2>Featured <b>Items</b></h2>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item carousel-item active">
<div class="row">
<!-- Catalog Item Title-->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br>Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Submit a request for <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="/sp?id=sc_cat_item&sys_id=<catalog_item_sys_id>" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<!-- Catalog Item Title-->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br>Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Submit a request for <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="/sp?id=sc_cat_item&sys_id=<catalog_item_sys_id>" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<!-- Catalog Item Title-->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br>Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Submit a request for <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="/sp?id=sc_cat_item&sys_id=<catalog_item_sys_id>" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<!-- Catalog Item Title-->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br>Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Submit a request for <br> Catalog Item Title
</p>
<a href="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
<!-- Catalog Item Title -->
<div class="col-sm-3">
<div class="thumb-wrapper">
<span class="wish-icon"> </span>
<div class="img-box">
<img src="https://mysnstuff.com/wp-content/uploads/2022/11/myservicenowstuff-icon-3.png?w=42&zoom=2" class="img-responsive img-fluid" alt="">
</div>
<div class="thumb-content">
<h4>Catalog Item Title</h4>
<p>
Request access to <br> Catalog Item Title
</p>
<a href="/sp?id=sc_cat_item&sys_id=<catalog_item_sys_id>" class="btn btn-primary">View Item</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left carousel-control-prev" data-target="#myCarousel1" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="carousel-control right carousel-control-next" data-target="#myCarousel1" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body {
background: #e2eaef;
font-family: "Open Sans", sans-serif;
}
h2 {
color: #428bca;
font-size: 26px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
position: relative;
margin: -30px 0 50px;
}
h2::after {
content: "";
width: 100px;
position: absolute;
margin: 0 auto;
height: 4px;
border-radius: 1px;
background: #d9534f;
left: 0;
right: 0;
bottom: -20px;
}
.carousel {
margin: 50px auto;
padding: 0 70px;
}
.carousel .item {
color: #747d89;
min-height: 325px;
text-align: center;
overflow: hidden;
}
.carousel .thumb-wrapper {
padding: 25px 15px;
background: #fff;
border-radius: 6px;
text-align: center;
position: relative;
border:1px solid #428bca;
}
.carousel .item .img-box {
height: 100px;
margin-bottom: 20px;
width: 100%;
position: relative;
}
.carousel .item img {
max-width: 100%;
max-height: 100%;
display: inline-block;
position: absolute;
bottom: 0;
margin: 0 auto;
left: 0;
right: 0;
}
.carousel .item h4 {
color: #428bca;
font-weight: bold;
font-size: 16px;
}
.carousel .item h4, .carousel .item p, .carousel .item ul {
margin-bottom: 5px;
}
.carousel .thumb-content .btn {
color: #d9534f;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
background: none;
border: 1px solid #d9534f;
padding: 6px 14px;
margin-top: 5px;
line-height: 16px;
border-radius: 20px;
}
.carousel .thumb-content .btn:hover, .carousel .thumb-content .btn:focus {
color: #fff;
background: #d9534f;
box-shadow: none;
}
.carousel .thumb-content .btn i {
font-size: 14px;
font-weight: bold;
margin-left: 5px;
}
.carousel .carousel-control {
height: 44px;
width: 40px;
background: #428bca;
margin: auto 0;
border-radius: 4px;
opacity: 0.8;
}
.carousel .carousel-control:hover {
background: #428bca;
opacity: 1;
}
.carousel .carousel-control i {
font-size: 36px;
position: absolute;
top: 50%;
display: inline-block;
margin: -19px 0 0 0;
z-index: 5;
left: 0;
right: 0;
color: #fff;
text-shadow: none;
font-weight: bold;
}
.carousel .item-price {
font-size: 13px;
padding: 2px 0;
}
.carousel .item-price strike {
opacity: 0.7;
margin-right: 5px;
}
.carousel .carousel-control.left i {
margin-left: -2px;
}
.carousel .carousel-control.right i {
margin-right: -4px;
}
.carousel .carousel-indicators {
bottom: -25px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 10px;
height: 10px;
margin: 4px;
border-radius: 50%;
border: none;
}
.carousel-indicators li {
background: rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {
background: rgba(0, 0, 0, 0.6);
}
.carousel .wish-icon {
position: absolute;
right: 10px;
top: 10px;
z-index: 99;
cursor: pointer;
font-size: 16px;
color: #abb0b8;
}
.carousel .wish-icon .fa-heart {
color: #ff6161;
}
.star-rating li {
padding: 0;
}
.star-rating i {
font-size: 14px;
color: #ffc000;
}
</style>
mySNstuff.com 