javascript - 如何使用 Bootstrap 禁用幻灯片中的左右箭头

Question

我需要创建一张幻灯片，当图像是第一个时，左箭头应该隐藏，当最后一个图像处于事件状态时，右箭头应该隐藏。我在这里添加了我的代码。是否有任何其他替代方法可以替代或任何新方法。有没有修改代码的选项，谁能给我指出正确的方向？

$("[id^=viewDocs]").on("click", function () {
  var docId = $(this).attr("id");
  var docIndex = docId.substr(docId.length - 1);
  var activeItemId = $(this).data("value");                                           
  $("div>div.item").removeClass("active");
  $("#"+activeItemId).addClass("active"); 
  var appName = $('#SavepatientResultsDetails_appName').val();
  var paramValue = $(this).data("id");
  $("#myModal").removeClass("hidden");
  $('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
  var modal = document.getElementById("myModal");                                                                             
  modal.style.display = "block";                          
});                                 

$('#myCarousel').on('slide.bs.carousel', function (ev) {
  var itemId = ev.relatedTarget.id;
  var paramValue =  $('#'+itemId).data('value');
  var appName = $('#SavepatientResultsDetails_appName').val();
  $('#downloadDocId').attr('href',appName+'/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId='+paramValue);
});

.carousel-inner > .item > img,
.carousel-inner > .item > div,
.carousel-inner > .item > a > img {
  width: 100%;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="downloadDocId" href="/doctorclinic/apps/PatientDetailsDoctor/ViewPatientTestResults/downloadUploadDocs?testResultsDocsId=100250">
  <span class="download-file" onclick="document.getElementById('myModal').style.display='none'"><i class="glyphicon glyphicon-download-alt"></i></span>
</a>
<a id="downloadDocId" href="#"> 
  <span class="close-popup" onclick="document.getElementById('myModal').style.display='none'">×</span>        
</a>    
<div class="modal-content1" id="img01">           
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li id="indicator1" data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li id="indicator2" data-target="#myCarousel" data-slide-to="1" class=""></li>
      <li id="insesrtIndicator" class="hidden"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div id="insertCarouselItem" class="hidden"></div> 
      <div class="item active" data-value="100250" id="docPdf1">
        <div id="pdfDoc1">
          <canvas height="841" width="595" style="display: block;"></canvas>
        </div>
      </div>
      <div class="item" data-value="100301" id="docImage2"></div>
    </div>          
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>  
  </div>
</div>

Answer 1

您可以使用这些 JavaScript 代码。

首先:

$('.left').hide();

$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();

  if (currentIndex >= 1) {
    $('.left').show();
  }
  else {
    $('.left').hide();
  }

  if (currentIndex === (carouselData.$items.length-1)) {
    $('.right').hide();
    $('.left').show();
  }
  else {
    $('.right').show();
  }
})

第二

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

$('#myCarousel').on('slid', '', checkitem);

$(document).ready(function(){
    checkitem();
});

function checkitem()
{
  var $this = $('#myCarousel');
  if($('.carousel-inner .item:first').hasClass('active')) {
    $this.children('.left.carousel-control').hide();
  } else if($('.carousel-inner .item:last').hasClass('active')) {
    $this.children('.right.carousel-control').hide();
  } else {
    $this.children('.carousel-control').show();
  } 
}

这里我使用了第二个 JavaScript 示例并做了你想要的:

$('.left').hide();

$('#carousel-example-generic').on('slid.bs.carousel', function (ev) {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getActiveIndex();

  if (currentIndex >= 1) {
    $('.left').show();
  }
  else {
    $('.left').hide();
  }

  if (currentIndex === (carouselData.$items.length-1)) {
    $('.right').hide();
    $('.left').show();
  }
  else {
    $('.right').show();
  }
})

<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<div class="container">
  <div class="row">
  	<div class="col-md-10 col-md-offset-1">

      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="//placehold.it/1024x600" class="img-responsive">
            <div class="carousel-caption">
              one
            </div>
          </div>
          <div class="item">
            <img src="//placehold.it/1024x600/999" class="img-responsive">
            <div class="carousel-caption">
              two
            </div>
          </div>
          <div class="item">
            <img src="//placehold.it/1024x600/bbb" class="img-responsive">
            <div class="carousel-caption">
              three
            </div>
          </div>
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
      
      </div>  
  </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

希望对您有所帮助。祝你好运! :)