Photoshop Question posted in
The official user guide can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search