如何在每次出现模态窗口时使用第一张图像启动 Bootstrap 轮播？ [关闭]

Question

我目前正在开发自己的作品集来展示我的作品。单击图像时，会出现引导轮播。

问题是引导轮播并不总是从第一个图像开始，我也想要它。有时它从另一个图像开始。此外，当您打开轮播并关闭它并再次打开它时，轮播将从您离开的位置开始，而不是从第一个图像开始。

<div class="item active"> 似乎不起作用。原因可能是我在同一页面上有太多轮播，但我该如何克服呢？

谢谢。

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

每次打开模态窗口时都需要重置轮播的活动元素。

尝试在页面末尾添加此代码：

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

Answer 2

在使用 Firefox 的开发人员工具查看您的代码后，我发现了这一点。

每次轮播滑动到另一个图像时，具有class="item active" 属性的div 更改为class="item"，下一个div 切换为class="item active"。所以每次打开。它从最后一个活动元素开始。