We Keep Coding

Problem with carousel while loading image dynamically

I have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.

The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.

Bootstrap carousel jQuery error

I'm trying to make a multiple items bootstrap carousel but it gives me this error: "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function, how can fix it?
here is my code:
$(document).ready(function () {
('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>

From the code you pasted, I cannot see that you are loading Bootstrap library (css and js code). You can see Bootstrap loading information here http://getbootstrap.com/getting-started/

A full description of Carousel component is reported in boostrap 4.
In this page, instead, you will find the required libraries.
Working code:
$(document).ready(function () {
$('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>

Bootstrap carousel with multiple items

I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.

Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>

Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)

How to make this type of bootstrap carousel

hi my friend how are you
i tried alot to do this type of carousel like 3 contain in one page but i couldnt do it
this is my bootstrap code
http://jsfiddle.net/esymm0gr/
one of my div
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="http://placehold.it/800x500" alt="">
<div class="caption">
<h3>Feature Label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
Buy Now! More Info
</p>
</div>
</div>
</div>
and i need to make three box in each time with carousel
like this
how can i do that ? any help please
or any name that help me to search by my self ? ?

Did and quick search and found quite a bit on how to do this easily. Here is an example I put together:
http://jsfiddle.net/esymm0gr/3/
HTML:
<div class="container">
<div class="col-md-12">
<h1>Bootstrap 3 Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-sm-4"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
<div class="col-sm-4"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-sm-4"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-sm-4"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-sm-4"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
<div class="col-sm-4"><img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
JQuery:
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 10000
})
$('#myCarousel').on('slid.bs.carousel', function() {
//alert("slid");
});
});

Bootstrap Carousel Slider: 4 Images at once - only shows one image at a time?

I am trying to implement this 4 image slider on my website, but for some reason only one image shows at a time.
I copy pasted the code here:
http://www.bootply.com/94452
For some reason, only one image occupies the space reserved for 4 of the images. When you hit the right arrow or wait for the interval, it goes to the second image.
Does anyone know why this might be?
See code in comments below:

if you want 4 images at a time to scroll then your images are not nested properly.just use this code it should work fine.
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div>
<div class="col-md-6 col-md-offset-3">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=2" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=3" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=4" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=5" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=6" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=7" class="img-responsive"></div>
<div class="col-xs-3"><img src="http://placehold.it/500/e499e4/fff&text=8" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

you can use carousel-indicators in your view and set each slide with a picture in ascending order eg.
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" style="width:89%" >
<div class="item active">
<img src="picture source" alt="First slide">
<div class="carousel-caption">
<strong>anything on an image displayed</Strong>
</div>
</div>
hope it is helpful...