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


Tags: javascript,html,css,twitter-bootstrap,carousel

Problem :

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>



Solution :

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>

    CSS Howto..

    how to configure .htc files to work on nginx

    How to get SASS working with RequestReduce?

    how to pass context value to css

    HTML, CSS - image inside image, how to do that?

    How to use add/subtract in css propert?

    jquery - how to queue up a series of css property changes

    How do i cover the image on navbar as well?

    How to customize devise login and signup forms created using the simple_form gem?

    How do I specify XPATH or CSS in Nokogiri to scrape a page's table data?

    How do I create bookmarklet to overlay html/div layer and CSS from external file

    How can I use dropdowns in a masonry layout?

    Displaying the first in simple Show / Hide content menu with active a

    How to colorize an image in CSS?

    How to change image size when nested in

    tag

    How to center an overflowing image inside of a constraining div

    how to set the background color of the whole page in css

    How can I have floated list items display their bullet in IE7?

    How do I validate day and month?

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    How to get the same height on two Bootstrap columns? [duplicate]

    How to set the width of background-color of a div?

    How to stop breaking tables border when page is spliting?

    How to make permanent changes to a website's CSS from within the browser?

    How to draw rectangle on the website to highlight?

    How to get div height 100% inside td of 100%

    Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

    If there is too many menu items how to gather them into collapsed menu

    How do I specify a css selector which matches exactly one of multiple values?

    How to make CSS animation jump rather than slide

    How can I Highlight links only in Blog Posts with Mouseover?