부트 스트랩 슬라이더 페이드 인

this template.과 같이 슬라이드를 변경할 때 부트 스트랩 슬라이더가 페이드 아웃되도록하려고합니다. 나는 asp.net와 함께 visual 2010을 사용하고 있습니다. 이제 문제는 이미지가 약간 바뀌지 않을 때 두 번째 이미지가 나타나기 전에 1 초 이내에 회색 배경이 나타납니다.부트 스트랩 슬라이더 페이드 인

<style type="text/css"> 
.carousel-fade .carousel-inner .item { 
       opacity: 0; 
       -webkit-transition-property: opacity; 
       -moz-transition-property: opacity; 
       -o-transition-property: opacity; 
       transition-property: opacity; 
      } 
      .carousel-fade .carousel-inner .active { 
       opacity: 1; 
      } 
      .carousel-fade .carousel-inner .active.left, 
      .carousel-fade .carousel-inner .active.right { 
       left: 0; 
       opacity: 0; 
       z-index: 1; 
      } 
      .carousel-fade .carousel-inner .next.left, 
      .carousel-fade .carousel-inner .prev.right { 
       opacity: 1; 
      } 
      .carousel-fade .carousel-control { 
       z-index: 2; 
      }  
    </style> 
</head> 
<body> 
<div id="Carousel" class="carousel slide carousel-fade"> 
     <ol class="carousel-indicators"> 
      <li data-target="Carousel" data-slide-to="0" class="active"></li> 
      <li data-target="Carousel" data-slide-to="1"></li> 
      <li data-target="Carousel" data-slide-to="2"></li> 
     </ol> 

     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/> 
      </div> 
      <div class="item"> 
      <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/> 
      </div> 
      <div class="item"> 
      <img src="../Images/ImageE_Beta.jpg" class="img-responsive"/> 
      </div> 
     </div> 

     <a class="left carousel-control" href="#Carousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#Carousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
</div> 
</body>

어떤 힌트 : 정말 이제 어떻게 내가 부트 스트랩 3.3.7를 사용하고 아래 내 코드는 ... 여기에 무슨 일이 일어나고 수없는 이유는 무엇입니까?

업데이트 지금은 <div id="Carousel" style="background-color:red" class="carousel slide carousel-fade">에 <div id="Carousel" class="carousel slide carousel-fade">을 변경하고이 변경 될 때 두 이미지 사이에 나타나는 색상은 빨간색입니다.

출처

2017-04-26 H.Al

여기에 전환 속성 만 지정했습니다. 전환 기간과 같은 다른 매개 변수는 어떻게됩니까? 지속 시간의 초기 값은'0s'이며 눈에 약간의 변화가있을 수 있습니다. – CBroe

@CBroe 제 생각은 정확히 –

전환 시간은 부트 스트랩 CSS 라이브러리에서 .carousel-inner > .item이고 값은 0.6s입니다 (1.5s로 변경되었습니다). 그러나 두 경우 모두 페이딩 때 : 두 이미지 사이에 회색 배경이 나타납니다. 잘못 퇴색하는 경우처럼 –

마지막으로 블록을 제거하여이 문제를 해결할 수 있습니다. @media all and (transform-3d), (-webkit-transform-3d)은 회전식 인너에만 해당됩니다.

출처

2017-04-27 13:54:07

멋진 솔루션. 나는 정말로 문제가 무엇인지 알고 싶었다. –

"전환 지속 시간"태그를 사용하는 것이 좋습니다. 슬라이더를 만드는 방법에 대한 페이지를 읽어야합니다.

그러나 실제로 내 힌트는 적어도 이제는 표준 0 초가되어서 전환 지속 시간을 설정하는 것입니다. 이 작동하지 않을 수 있습니다

다른 몇 가지 이유 :

는 style 태그를 가지고 있지만 u는 심지어 부트 스트랩에로드 할 수 있습니까? "스타일 포함"이 없습니다.

아니면이 구식입니다. u는 슬라이더의 업 로더가 downvoted되어 작동하지 않을 수 있음을 알 수 있습니다.

희망이 있습니다.

출처

2017-04-26 13:16:38

위의 내 의견을 확인하십시오! –

왜 내 프로젝트가 아니라 템플릿에서 작동해야합니까?! –

내 게시물을 참조하십시오. 내가 편집 할 것입니다 –

부트 스트랩 슬라이더 페이드 인

답변

관련 문제