どのようにブートストラップを使用してスライドの左と右の矢印を無効にする

Question

私は画像が最初に左の矢印を非表示にする必要があり、最後の画像がアクティブであるときにスライドを作成する必要があります。ここに自分のコードを追加しました。交換する方法や新しい方法がありますか？コードを変更するオプションはありますか、誰かが正しい方向に私を指すことができますか？あなたはこれらのJavaScriptのコードを使用することができます

$("[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

。

まず：ここ

$('.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(); 
    } 
} 

私は2番目の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"> 
 
    \t <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>

あなたのお役に立てば幸いです。がんばろう！ :)