2014-10-08 2 views
0

부트 스트랩 3을 사용하고 있는데 슬라이더에 대한 질문이 있습니다. 텍스트 만 바꾸거나 슬라이딩하는 동안 같은 배경을 유지할 수 있습니까? 그렇다면 올바른 코드는 무엇입니까? 몇 개조하면 되겠와 부트 스트랩 문서에서 예제를 사용하여부트 스트랩 슬라이더 : 정적 배경이있는 텍스트 변경

+0

"부트 스트랩"태그를 사용하지 마십시오. 다른 것을 의미하기 때문에 "twitter-bootstrap"을 사용하십시오. –

답변

0

다음 .carousel-inner에서 원하는 배경을 설정하는 것입니다 정적 배경을 얻기의

<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"> /* set background on this element */ 
    <div class="item active"> 
    <div class="myplaceholder"></div> /* remove the <img> tags and replace with transparent div as a place holder */ 
     <div class="carousel-caption"> 
     <h3>This is the text that will scroll passed over a static background</h3> 
     </div> 
    </div> 

한 가지 방법. 그런 다음 < img> 요소를 배경색이 설정되지 않은 div로 바꿉니다.

.carousel-inner { background: red; } 
.myplaceholder { height: 400px; width: 400px; } 

이것은 .carousel-caption 요소를 볼 수 그냥 (이 경우) 정적 빨간색 배경의 상단을 통해 스크롤 표시 할 수 있습니다. 다소 추한 해킹 일 뿐이므로 응답 성이 필요하다면 다시 생각해야하지만 잘하면 올바른 방향으로 설정됩니다.

관련 문제