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.

How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am currently developing my own portfolio to display my work. When you click on an image, a bootstrap carousel appears.
The problem is that the bootstrap carousel does not always start with the first image and I would like it too. Sometimes it starts off with another image. Also when you open the carousel and close it and open it again, the carousel starts from where you left off rather than the first image.
The <div class="item active"> does not seem to be working. The reason may be that I have too many carousels on the same page but how can I overcome this?
Thank you.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://www.ahdabnasir.com/css/simple-sidebar.css" rel="stylesheet">
<section id="portfolio" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<button class="cleared" data-toggle="modal" data-target=".bs-example-modal-lg">
<img src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears.jpg" class="img-responsive front" alt="Best Years">
<div class="portfolio-caption">
<h4>Best Years</h4>
<p class="text-muted">Adobe Photoshop</p>
</div>
</button>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<button class="cleared" data-toggle="modal" data-target=".tracinggame">
<img src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame.PNG" class="img-responsive front" alt="Trace the Arabic Letters">
<div class="portfolio-caption">
<h4>Trace the Arabic Letters</h4>
<p class="text-muted">Unity2D and C#</p>
</div>
</button>
</div>
</div>
</div>
</section>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears.jpg" alt="Best Years">
<div class="carousel-caption">
Created artwork for a UK toy wholesaler specialising in knitted and crochet toys using photos of knitted dinosaurs and adding in child-like drawings and cartoons in order to move the image from being static to active. I gave each dinosaur an activity and made it suitable, recognisable and enjoyable for the target audience which are children under 6 years old. The aim was for the activity to make the dinosaur more appealing as a friend to a pre-school child. A testimonial from Best Years, "The designs Ahdab created for us more than surpassed our expectations. Also every query was answered in a timely and friendly manner. Very happy".
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears1.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears2.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears3.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears4.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears5.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears6.jpg" alt="Best Years">
</div>
<div class="item">
<img class="img-responsive" src="http://www.ahdabnasir.com/img/graphics/BestYears/BestYears7.jpg" alt="Best Years">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<div class="modal fade tracinggame" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="tracing" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame.PNG" alt="Trace the Arabic Letters">
<div class="carousel-caption">
Part of my final year university project where I created games for my children's Arabic learning website. I developed this game using C# and Unity2D with the letters and graphics being done in Adobe Photoshop. The purpose of the game is to teach the children how to write Arabic letters. Tracing points are given which are numbered from where the child should start and end. If the child does not following the tracing line or points or lifts their finger from the mouse/trackpad, there drawing is removed. The pencil drawing color changes randomly. The child can filter through the letters and erase their drawing using the menu on the left.
</div>
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame1.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame2.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame3.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame4.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame5.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame6.PNG" alt="Trace the Arabic Letters">
</div>
<div class="item">
<img class="img-responsive" style="width: 100%;" src="http://www.ahdabnasir.com/img/game/TracingGame/TracingGame7.PNG" alt="Trace the Arabic Letters">
</div>
</div>
<a class="left carousel-control" href="#tracing" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#tracing" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

You need to reset the active element of the carousel every time you open a modal window.
Try to add this code at the end of your page:
<script>
$(".modal").on('show.bs.modal', function () {
var firstItem = $(this).find(".item:first");
if ( !firstItem.hasClass("active") ) {
$(this).find(".active").removeClass("active");
firstItem.addClass("active");
}
});
</script>

After looking a little bit at your code with firefox's developer tools this is what I have found out.
Every time the carousel slides to another image the div with the attribute class="item active" changes to class="item" and the next div switches to class="item active". So every time you open it. It starts with the last active element.

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...

Bootstrap Carousel not wrapping left

the Bootstrap Carousel works as expected except for the fact that it wont go from the first slide to the last slide when clicking the left arrow. the left arrow works perfectly except for at the first slide, and then the carousel goes away.
$(document).ready(function() {
$('#myCarousel').carousel({
interval: false,
});
});
<div class="row">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" class="active"></li>
<li data-target="#myCarousel"></li>
<li data-target="#myCarousel"></li>
<li data-target="#myCarousel"></li>
</ul>
<!-- Slide 0 -->
<div class="item active">
<img src="carousel0.jpg">
<div class="carousel-caption">
<h3>Image 0</h3>
<p>Image 0 Description</p>
</div>
</div>
<!-- Slide 1 -->
<div class="item">
<img src="carousel1.jpg">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Description</p>
</div>
</div>
<!-- Slide 2 -->
<div class="item">
<img src="carousel2.jpg">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Description</p>
</div>
</div>
<!-- Slide 3 -->
<div class="item">
<img src="carousel3.jpg">
<div class="carousel-caption">
<h3>Image 3</h3>
<p>Image 3 Description</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Fiddler: https://jsfiddle.net/z4b2bwg6/7/

Have you tried it without interval:false?
interval: The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
Also, is wrap set to true?
wrap: Whether the carousel should cycle continuously or have hard stops.

Check and remove your extra comma in the js script -
$(document).ready(function() {
$('#myCarousel').carousel({
interval: false
});
});
Then remember to put the jQuery code below the html code for carousal.
After doing that it works for me.
Check the demo at -
Code and demo of carousal
If it still doesn't work there must be some other problem, maybe rogue javascript code or unclosed div tag.

Bootstrap carousel not working in rails

I can't get Bootstraps carousel to work with rails... what am I missing?
1.) I downloaded a custom version of bootstrap with the carousel component.
2.) Placed it in my assets/js and required the file in application.js
3.) Initialized the carousel by:
$(document).ready(function(){
$('.carousel').carousel()
});
4.) Put my html markup:
<section class="wrapper row">
<article class="slider">
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</article>
</section>
It's not working! Any ideas?