부트 스트랩을 사용하여 슬라이드에서 왼쪽 및 오른쪽 화살표를 비활성화하는 방법

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

는 이러한 자바 스크립트 코드를 사용할 수 있습니다.

첫째 :

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

나는 두 번째 자바 스크립트 예제를 사용하고 당신이 원하는 것을 만들어 :

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

희망 하시겠습니까? 행운을 빕니다! :)