javascript - 尝试使用 jquery 在多轮播页面上选择两个不同的起点

Question

我正在尝试为幻灯片内容选择两个不同的起点。主画廊的 setSlideContent 指示器设置为 17。但是对于将弹出的模式，如果有该图像的替代变体将从 0 开始。有没有办法在主画廊轮播的 17 开始幻灯片内容，但如果它是模式轮播，它是否从 0 开始？我猜我在这里需要一个 if/else。

将(使用原始脚本)更改 setSlideContent 以检查 if $carouselSelector 是否包含 .modal 返回 setSlideSelector(0) 否则如果 $carouselSelector 不包含 .modal return setSlideSelector(17) 或我需要工作的任何数字？对此仍然非常陌生。

请注意，在下面的示例中，setSlideContent 设置为 0，但实际上它永远不会设置为 0(除非轮播处于模态)以考虑添加的新幻灯片。该编号将始终是添加的最后一张幻灯片，在我的例子中是 17。

$(function() {

  $('.carousel-container').each(function() {
    var $carouselContainer = $(this);
    var $carousel = $carouselContainer.find('.carousel');
    var $carouselText = $carouselContainer.find('.carousel-text');
    var $carouselSelector = $carouselContainer.find('.carousel-selector');

    $carousel.carousel({
      interval: false
    });

    function setSlideContent(id) {
      var targetContent = $carouselContainer.find('.slide-content[data-slide="' +
        id +
        '"]').html();

      $carouselText.html(targetContent);
    }

    setSlideContent(0);

    $carouselSelector.on('click', function() {
      var targetSlide = $(this).data('slide');

      $carousel.carousel(targetSlide);
    });

    $carousel.on('slid.bs.carousel', function() {
      var targetSlide = $carousel.find('.active').index();

      setSlideContent(targetSlide);
    });
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<div class="container carousel-container">
  <div class="row">
    <div class="col">
      <div class="carousel slide" id="carousel-0">
        <!-- change this id and match with that in the JS -->
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active carousel-item" data-slide-number="0">
            <img src="http://placehold.it/770x300&text=one">
          </div>
          <div class="carousel-item" data-slide-number="1">
            <img src="http://placehold.it/770x300&text=two">
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control-prev" href="#carousel-0" role="button" data-slide="prev">
            <!-- change this id and match with that in the JS -->
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          </a>
          <a class="carousel-control-next" href="#carousel-0" role="button" data-slide="next">
            <!-- change this id and match with that in the JS -->
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col carousel-text"></div>
    <div style="display: none;">
      <!-- only needs the inline CSS -->
      <div class="slide-content" data-slide="0">
        <h5>Slide 1</h5>
        <button class="btn btn-outline-dark btn-sm" data-toggle="modal" data-target="#modal1" type="button" style="margin-left: -1px;">press me</button>
        <div class="dropdown">
          <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
          </div>
        </div>
      </div>
      <div class="slide-content" data-slide="1">
        <!-- change this id and match with that in the JS -->
        <h5>Slide 2</h5>
        <div class="dropdown">
          <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <!--/Slider-->
  <div class="row">
    <div class="col">
      <a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
      <!-- change this id and match with that in the JS -->
    </div>
    <div class="col">
      <a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
      <!-- change this id and match with that in the JS -->
    </div>
  </div>
</div>
<div class="container carousel-container">
  <div class="row">
    <div class="col">
      <div class="carousel slide" id="carousel-1">
        <!-- change this id and match with that in the JS -->
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active carousel-item" data-slide-number="0">
            <img src="http://placehold.it/770x300&text=one">
          </div>
          <div class="carousel-item" data-slide-number="1">
            <img src="http://placehold.it/770x300&text=two">
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
            <!-- change this id and match with that in the JS -->
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          </a>
          <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
            <!-- change this id and match with that in the JS -->
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col carousel-text"></div>
    <!-- change this id and match with that in JS -->
    <div style="display: none;">
      <!-- only needs the inline CSS -->
      <div class="slide-content" data-slide="0">
        <!-- change this id and match with that in the JS -->
        <h5>Dreams of Avarice1</h5>
        <div class="dropdown">
          <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
          </div>
        </div>
      </div>
      <div class="slide-content" data-slide="1">
        <!-- change this id and match with that in the JS -->
        <h5>Avarice Zero1</h5>
        <div class="dropdown">
          <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <!--/Slider-->
  <div class="row">
    <div class="col">
      <a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
      <!-- change this id and match with that in the JS -->
    </div>
    <div class="col">
      <a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
      <!-- change this id and match with that in the JS -->
    </div>
  </div>
</div>

<!-- modal -->

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h3>...</h3>
      </div>
      <div class="modal-body">
        <div class="container-fluid carousel-container">
          <div class="container">
            <div class="row mx-auto">
              <div class="col">
                <div class="carousel slide carousel-fade" id="carousel-...">
                  <div class="carousel-inner">
                    <div class="active carousel-item" data-slide-number="0">
                      <img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
                    <div class="carousel-item" data-slide-number="1">
                      <img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            <div class="row mx-auto">
              <div class="col carousel-text"></div>
              <div style="display: none;">
                <div class="slide-content" data-slide="0">
                  <h5>0ne</h5>
                  <div class="btn-group">
                    <div class="btn-group">
                      <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./Downloads/something/something" download>1280x1024</a>
                      </div>
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./Downloads/something/something" download>2560x1024 (Dual)</a>
                      </div>
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./Downloads/something/something" download>3840x1024 (Triple)</a>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="slide-content" data-slide="1">
                  <h5>two</h5>
                  <div class="btn-group">
                    <div class="btn-group">
                      <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./Downloads/other/other" download>1280x1024</a>
                      </div>
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./Downloads/other/other" download>2560x1024 (Dual)</a>
                      </div>
                    </div>
                    <div class="btn-group">
                      <button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
                      <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="./Downloads/other/other" download>3840x1024 (Triple)</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr>
          <!--/Slider-->
          <div class="row mx-auto">
            <div class="col">
              <a class="carousel-selector" data-slide="0"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
            </div>
            <div class="col">
              <a class="carousel-selector" data-slide="1"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
            </div>
            <div class="col"></div>
            <div class="col"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我没理解错的话，你想要:

• 在第一张幻灯片上使用相应的标题初始化模态轮播。
• 在最后一张幻灯片上使用相应的标题初始化所有其他轮播。

至少，这是有道理的。

如果我是对的，那么 javascript 将是这样的:

$(function() {
    $('.carousel-container').each(function() {
        var $carouselContainer = $(this);
        var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
            var targetSlide = $carousel.find('.active').index();
            var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
            $carouselContainer.find('.carousel-text').html(targetContent);
        }).carousel({
            interval: false
        });
        $carouselContainer.find('.carousel-selector').on('click', function() {
            var targetSlide = $(this).data('slide');
            $carousel.carousel(targetSlide);
        });
        // The carousel is already at first slide (slide 0).
        var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
        if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container 
            // Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
            $carousel.trigger('slid.bs.carousel');
        } else { // ... else, there are 2 or more slides and this is a non-modal carousel: 
            // send to last slide
            $carousel.carousel(n - 1);
            $carousel.trigger('slid.bs.carousel'); // shouldn't be necessary but has been found to be a workaround for `slid.bs.carousel` not being triggered automatically under some (undiagnosed) circumstances.
        }
    });
});

Demo