부트 스트랩 4 : 회전식 페이드 전환이 작동하지 않습니다.

Question

아래 코드는 부트 스트랩 버전 3을 사용하여 완벽하게 정상적으로 작동합니다. 그러나 부트 스트랩 4 베타 2로 업그레이드 한 후에는 페이드 전환이 작동하지 않습니다.

HTML 둘러보고

<div id="carousel1" class="carousel fade" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel1" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel1" data-slide-to="1"></li> 
     <li data-target="#carousel1" data-slide-to="2"></li> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 
     <div class="item active"><img src="images/a.jpg" alt="First slide image" class="center-block"> 
     <div class="carousel-caption"> 
      <h3>First slide Heading</h3> 
      <p>First slide Caption</p> 
     </div> 
     </div> 
     <div class="item"><img src="images/b.jpg" alt="Second slide image" class="center-block"> 
     <div class="carousel-caption"> 
      <h3>Second slide Heading</h3> 
      <p>Second slide Caption</p> 
     </div> 
     </div> 
     <div class="item"><img src="images/c.jpg" alt="Third slide image" class="center-block"> 
     <div class="carousel-caption"> 
      <h3>Third slide Heading</h3> 
      <p>Third slide Caption</p> 
     </div> 
     </div> 
    </div> 

    <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

CSS

.carousel.fade { 
    opacity: 1; 
} 
.carousel.fade .item { 
    transition: opacity ease-out .7s; 
    left: 0; 
    opacity: 0; /* hide all slides */ 
    top: 0; 
    position: absolute; 
    width: 100%; 
    display: block; 
} 
.carousel.fade .item:first-child { 
    top: auto; 
    opacity: 1; /* show first slide */ 
    position: relative; 
} 
.carousel.fade .item.active { 
    opacity: 1; 
} 

JS

$(function(){ 
    $('.carousel').carousel({ 
     interval: 6000 
    }); 
}); 

을 그리고있어왔다 보인다 : 그것은 단지 오히려 원활한 전환보다 다음 이미지로 이동 최근 부트 스트랩 업그레이드에 대한 몇 가지 문제가 있으면 도움을받을 수 있습니다.

Answer 1

이미 알아 챘 듯이 부트 스트랩 4에서 많은 부분이 변경되었습니다. 아래 해결 방법으로 수행 한 방식을 안내하겠습니다.

• .fade은 기본 부트 스트랩 .fade 수업을 방해하지 .carousel-fade로 이름이 변경되었다.
• .item은 .carousel-item으로 바뀌 었습니다. 그 이유는 회전 목마 항목의 Bootsrap 4에있는 이름이기 때문입니다. 슬라이드의 위치 때문에 페이딩 효과 지금 절대 같이
• , 난 .carousel-inner에 .embed-responsive embed-responsive-16by9 클래스를 첨가하고, 또한 .embed-responsive-item.carousel-item에 슬라이드 항목의 위치 돌봐 또한 슬라이드 컨테이너의 높이를 유지하고. (다른 화면 비율로 이미지를 사용하려는 경우, 당신은 .embed-responsive-16by9 클래스를 변경해야 기본값 here 나열됩니다..)

그래서이 될 것이다 나의 접근 방식 :

.carousel.carousel-fade .carousel-item { 
 
    display: block; 
 
    opacity: 0; 
 
    transition: opacity ease-out .7s; 
 
} 
 

 
.carousel.carousel-fade .carousel-item.active { 
 
    opacity: 1 !important; 
 
}

<div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="2000"> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#carousel-fade" data-slide-to="0" class="active"></li> 
 
     <li data-target="#carousel-fade" data-slide-to="1"></li> 
 
     <li data-target="#carousel-fade" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox"> 
 
     <div class="carousel-item embed-responsive-item active"> 
 
     <img src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Slide%201" alt="First slide image" class="img-fluid"> 
 
     <div class="carousel-caption"> 
 
      <h3>First slide Heading</h3> 
 
      <p>First slide Caption</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="carousel-item embed-responsive-item"> 
 
     <img src="http://via.placeholder.com/1600x900/9400D3/ffffff?text=Slide%202" alt="Second slide image" class="img-fluid"> 
 
     <div class="carousel-caption"> 
 
      <h3>Second slide Heading</h3> 
 
      <p>Second slide Caption</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="carousel-item embed-responsive-item"> 
 
     <img src="http://via.placeholder.com/1600x900/FF1493/ffffff?text=Slide%203" alt="Third slide image" class="img-fluid"> 
 
     <div class="carousel-caption"> 
 
      <h3>Third slide Heading</h3> 
 
      <p>Third slide Caption</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev"> 
 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next"> 
 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

을

2 메모 더보기 :

• nd 간격은 data-interval 속성을 통해 .carousel입니다. 회전 목마 컨트롤의
• 마크 업 또한 너무,이 치료를 일 감사, 부트 스트랩 4.