xadjnxadjcx xadjnxadjcx - 5 months ago 26
CSS Question

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

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>




Answer

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>