We Keep Coding

Iterate using each function JS - javascript

I have 3 cards in my blade.php which looks like this:
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>
What I need to get is the text inside the span. Here's my code for the each function:
$("#cfluid").each(function(){
var title = $(".roomT").text();
console.log(title);
});
Howevrer I got this as a result which I know is wrong:
A1A2A3
In which it should be like this:
A1
A2
A3

You can use classes (card-body and roomT) as part of the selector. Then simply use this object to refer the current element to get the text:
$("#cfluid .card-body .roomT").each(function(){
var title = $(this).text();
console.log(title);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT"
id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>

if you are using #cfuild as parent .You should loop the .roomT.And if you need a array result better use Jquery.map instead of each
var res = $("#cfluid").find('.roomT').map(function(){
return $(this).text();
}).get();
console.log(res)
var res = $("#cfluid").find('.roomT').map(function() {
return $(this).text();
}).get();
console.log(res)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid cfluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
<div class="col-md-1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A3</span>
<small>time here </small>
</div>
</div>
</div>
</div>
</div>

You can directly locate the .roomT element and loop as below
$('#cfluid .roomT').each((index, element) => {
console.log($(element).text())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A1</span>
<small>time here </small>
</div>
</div>
</div>
<div class="container-fluid" id="cfluid">
<div class="row">
<div class="col-md-1 colmd1">
<div class="card bg-success text-white">
<div class="card-body">
<i class="fa-2x fas fa-door-closed "></i>
<span style="font-size:30px" class="roomT" id="roomT">A2</span>
<small>time here </small>
</div>
</div>
</div>
</div>

Related

i want to append my products to an owl-carousel from javascript but when i append it displays my owl-carousel like this:
While owl-carousel should be:
So my HTML code is:
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="owl-carousel">
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
</div>
</div>
My Javacsript code:
sectionCarouselProducts.innerHTML = sectionCarouselProducts.innerHTML + `
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="${product.img}" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
${product.title}
</h4>
</div>
</div>
</div>
`
Btw, i append my inner html to this html:
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="owl-carousel carousel-products">
</div>
</div>
So in conclusion why my owl carousel when i append it displays vertical and not carousel? Thank you for your help! For further information you can tell me to edit it!

var slider = tns({
container: '.my-slider',
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 3
}
}
});
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
<div class="my-slider">
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
<div class="ml-2 mr-2">
<div class="card">
<div class="cs-pic">
<div class="effect">
<div class="listProduct">
<div class="product-action-list d-flex">
<span class="fa fa-eye"></span>
<span class="fa fa-heart"></span>
<span class="fa fa-envelope"></span>
</div>
</div>
</div>
<img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
</div>
<div class="card-body">
<h4 class="card-title text-center">
Electrical
</h4>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
Here is an example with your setup ... Hope it helps...

I just started learning javascript. I am facing a problem with filtering products while getting value from database.
my javascript code is below:
`var $grids = $(".grid").isotope({
itemSelector : '.grid-item',
layoutMode : 'fitRows'
});
$(".button-group").on("click", "button", function(){
var filterValue = $(this).attr('data-filter');
$grids.isotope({ filter: filterValue});
})
where as my php code is below:
<div id="filters" class="button-group text-end">
<button class="btn" data-filter="*">All Categories</button>
<button class="btn" data-filter=".clothes">Clothes</button>
<button class="btn" data-filter=".samsung">Phones</button>
<button class="btn" data-filter=".electronics">Electronics</button>
</div>
<div class="grid">
<?php
while($row = mysqli_fetch_array($result2)) {
?>
<div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src=" <?php echo " {$row['item_image']}"; ?>" alt="Calli">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<?php
}
?>
I am getting data-filter value from database column "item-brand" having the same value as mention in data-filter above. Only All categories is working perfectly. Kindly help me out in this.

Please make sure class e.g clothes, samsung are not escaped while php echo. means try
<div class="grid-item border border-warning <?php echo " {$row['item_brand']}"; ?>" >
instead of
<div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >
I have not exact php code or database so not sure but i have created demo html as below in which working fine will help you.
<div id="filters" class="button-group text-end">
<button class="btn" data-filter="*">All Categories</button>
<button class="btn" data-filter=".clothes">Clothes</button>
<button class="btn" data-filter=".samsung">Phones</button>
<button class="btn" data-filter=".electronics">Electronics</button>
</div>
<div class="grid">
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning clothes" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<div class="grid-item border border-warning samsung" >
<div class="item py-1" style="width: 200px;">
<img class="img-fluid m-1 bg-light" src="images/Hydrangeas.jpg" alt="Calli" height="100px;">
<div class="text-center">
<h6>Mobile</h6>
<div class="rating text-warning">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="far fa-star"></i></span>
</div>
<div class="price">
$213
</div>
<button class="btn btn-warning">Add to Cart</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
<script type="text/javascript">
var $grids = $(".grid").isotope({
itemSelector : '.grid-item',
layoutMode : 'fitRows'
});
$(".button-group").on("click", "button", function(){
var filterValue = $(this).attr('data-filter');
$grids.isotope({ filter: filterValue});
})
</script>

I'm receiving this error every time I scroll towards my counter up function -> "Uncaught TypeError: Cannot read property 'shift' of null at f (jquery.counterup.js:62)". Any idea how to fix it ?
Here's the code:
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>

I have upgraded the version of counterUp and no problem: instead version 1.0.0, use the 2.1.0.
<script src="https://unpkg.com/jquery.counterup#2.1.0/jquery.counterup.js"></script>
$('.counter').counterUp({
delay: 10,
time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/solid.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://unpkg.com/jquery.counterup#2.1.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>
<div class="container-fluid padding text-center counter-group">
<div class="row padding">
<div class="col-lg-3 content reveal">
<i class="fas fa-users"></i><br>
<span class="counter1">5000</span><span>+</span>
<div class="text">Clients</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-briefcase"></i><br>
<span class="counter1">2200</span><span>+</span>
<div class="text">Projects</div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-building"></i><br>
<span class="counter1">8600</span><span>+</span>
<div class="text">Registered Properties </div>
</div>
<div class="col-lg-3 content reveal">
<i class="fas fa-medal"></i><br>
<span class="counter1">100</span><span>+</span>
<div class="text">Achievements</div>
</div>
</div>
</div>

This Carousel is working fine on one webpage(slide automatically and with buttons), but when i ut this code to my index page then it slides automatticaly but not with buttons(prev, next).
Following is the code:
(Entire is the complete detail of this error, I am using html5 with Bootstrap4)
<div class="container-fluid pb-5">
<div class="row">
<div class="col-12 text-center mt-3">
<h1 class="mx-auto mt-5 afterline">Programs & Projects</h1>
</div>
</div>
<div class="row">
<div class="col-6 col-xs-4 mt-4">
<select id="select_featured_project" class="float-right px-xl-5 px-lg-5 px-md-5 px-4 py-3">
<option value="featured">Featured</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="col-6 col-xs-4 mt-4">
<select id="select_design_tech" class="px-xl-5 px-lg-5 px-md-5 px-2 py-3">
<option value="featured">Design & Tech</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<!-- Carousel row -->
<div class="row">
<div class="col-12">
<div id="carouselExampleControls" class="carousel slide mt-5" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container p-4">
<!-- row 1 -->
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 1 ends -->
<!-- row 2 -->
<div class="row justify-content-center mt-3">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 2 ends -->
</div>
<!-- container ends -->
</div>
<!-- carousel-item slide 1 ends -->
<div class="carousel-item">
<div class="container p-4">
<!-- row 1 -->
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 1 ends -->
<!-- row 2 -->
<div class="row justify-content-center mt-3">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 2 ends -->
</div>
<!-- container ends -->
</div>
<!-- carousel-item slide 2 ends -->
</div>
<!-- carousel-inner ends -->
<a class="carousel-control-prev" style="color:black" href="#carouselExampleControls" role="button" data-slide="prev">
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
<!--visible on xl-->
<span><i class="d-none d-xl-block fas fa-chevron-left fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
<!-- visible on lg -->
<span><i class="d-none d-lg-block d-xl-none fas fa-chevron-left fa-8x" aria-hidden="true"></i></span>
<!-- visible on md -->
<span><i class="d-none d-md-block d-lg-none fas fa-chevron-left fa-6x" aria-hidden="true"></i></span>
<!-- visible on sm -->
<span><i class="d-none d-sm-block d-md-none fas fa-chevron-left fa-4x" aria-hidden="true"></i></span>
<!-- visible on xs -->
<span><i class="d-block d-sm-none fas fa-chevron-left fa-2x" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" style="color:black;" href="#carouselExampleControls" role="button" data-slide="next">
<!--visible on xl-->
<span><i class="d-none d-xl-block fas fa-chevron-right fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
<!-- visible on lg -->
<span><i class="d-none d-lg-block d-xl-none fas fa-chevron-right fa-8x" aria-hidden="true"></i></span>
<!-- visible on md -->
<span><i class="d-none d-md-block d-lg-none fas fa-chevron-right fa-6x" aria-hidden="true"></i></span>
<!-- visible on sm -->
<span><i class="d-none d-sm-block d-md-none fas fa-chevron-right fa-4x" aria-hidden="true"></i></span>
<!-- visible on xs -->
<span><i class="d-block d-sm-none fas fa-chevron-right fa-2x" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
<!-- carousel-controls ends -->
</div>
</div>
</div>
<!--Carousel row ends -->
</div>
Bootstrap cdn
<!--DISABLE ZOOMING -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<!-- <link rel="stylesheet" type="text/css" href="./styles/bootstrap-4.4.1/css/bootstrap.min.css"> -->
jQuery cdn
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/37a1f2cd33.js" crossorigin="anonymous"></script>

This problem was because of same id of multiple carousel.

I am having trouble with my Bootstrap Product Carousel. I have come across a issue where the last item gets pushed down in my carousel. example here http://codepen.io/riwakawebsitedesigns/pen/Kibrk/?editors=111 http://codepen.io/riwakawebsitedesigns/full/Kibrk/
I would like it to be able to slide line no matter how many items I have.
Also on mobile view just to display one item and slides to next item.
<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.module-heading {
font-size: 16px;
text-transform: uppercase;
font-family: "Lucida Grande","Lucida Sans Unicode",Calibri,sans-serif;
font-weight: 700;
margin-top: 0;
padding-bottom: 5px;
border-bottom: 1px solid #CCCCCC;
margin-bottom: 10px;
}
.module-title {
background: #CCCCCC;
}
.module-title h3 {
margin: 0;
padding: 0;
}
.controls {
background: #DFDFDF;
margin: 0;
padding: 0;
}
.col-item {
border: 1px solid #E1E1E1;
border-radius: 5px;
background: #FFF;
}
.col-item .photo img {
}
.col-item .info {
padding: 10px;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
.col-item:hover .info {
background-color: #F5F5DC;
}
.col-item .price {
float: left;
margin-top: 5px;
}
.col-item .price h5 {
line-height: 20px;
margin: 0;
}
.price-text-color {
color: #219FD1;
}
.col-item .info .rating {
color: #777;
}
.col-item .rating {
float: left;
font-size: 17px;
text-align: right;
line-height: 52px;
margin-bottom: 10px;
height: 52px;
}
.col-item .separator {
border-top: 1px solid #E1E1E1;
}
.col-item .separator p {
line-height: 20px;
margin-bottom: 0;
margin-top: 10px;
text-align: center;
}
.col-item .separator p i {
margin-right: 5px;
}
.col-item .btn-add {
width: 50%;
float: left;
}
.col-item .btn-add {
border-right: 1px solid #E1E1E1;
}
.col-item .btn-details {
width: 50%;
float: left;
padding-left: 10px;
}

It depends on the number of elements in the . So you have to modify your script to add only three items in this tag.
Try with this code :
<div class="container" id="masterhead">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 hidden-xs">
<div class="column-left">
<ul class="list-group">
<li class="list-group-item"><div class="list-heading"><h4>Categories</h4></div></li>
<li class="list-group-item">Computer Packages</li>
<li class="list-group-item">Hard Drives</li>
<li class="list-group-item">Software</li>
<li class="list-group-item">Video Cards</li>
<li class="list-group-item">Sound Cards</li>
</ul>
</div><!-- /. Column-left -->
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
<div class="content">
<div class="module-heading">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 pull-left">
<div class="module-title">
<h3>Featured Products</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 ">
<div class="controls hidden-xs text-right">
<a class="left fa fa-chevron-left btn btn-default" href="#carousel-example" data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default" href="#carousel-example" data-slide="next"></a>
</div><!-- /. Controls -->
</div>
</div>
</div><!-- /. Module-Heading -->
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product Example</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Sample Product</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Next Sample Product</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Grouped Product</h5>
<h5 class="price-text-color">$249.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$149.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-item">
<div class="thumbnail">
<div class="photo">
<img src="holder.js/350x260" class="img-responsive" alt="...">
</div>
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>Product with Variants</h5>
<h5 class="price-text-color">$199.99</h5>
</div>
<div class="rating hidden-sm col-md-6">
<i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color fa fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add">
<i class="fa fa-shopping-cart"></i>
Add to cart
</p>
<p class="btn-details">
<i class="fa fa-list"></i>
More details
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /. Content -->
</div><!-- /. Content Columns -->
</div>
</div><!-- /. Container -->