引導旋轉木馬滑塊 - 只移動滑塊，沒有過多的內容

.carousel { 
 
    position: relative; 
 
    height: 500px; 
 
    .carousel-inner .item { 
 
     height: 500px; 
 
    } 
 
    .carousel-indicators > li { 
 
     margin: 0 2px; 
 
     background-color: $maincolor; 
 
     border-color: $maincolor; 
 
     opacity: .7; 
 
     &.active { 
 
     width: 10px; 
 
     height: 10px; 
 
     opacity: 1; 
 
     } 
 
    } 
 
    } 
 

 
    .hero { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    z-index: 3; 
 
    color: #fff; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); 
 
    -webkit-transform: translate3d(-50%, -50%, 0); 
 
    -moz-transform: translate3d(-50%, -50%, 0); 
 
    -ms-transform: translate3d(-50%, -50%, 0); 
 
    -o-transform: translate3d(-50%, -50%, 0); 
 
    transform: translate3d(-50%, -50%, 0); 
 
    h1 { 
 
     font-size: 6em; 
 
     font-weight: bold; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    .logo{ 
 
     margin-bottom:-5%; 
 
     width:300px; 
 
    } 
 
    } 
 

 
    .btn { 
 
    &.btn-lg { 
 
     padding: 10px 40px; 
 
    } 
 
    &.btn-hero { 
 
     color: #f5f5f5; 
 
     background-color: $maincolor; 
 
     border-color: $maincolor; 
 
     outline: none; 
 
     margin: 20px auto; 
 
     &:hover, &:focus { 
 
     color: #f5f5f5; 
 
     background-color:$secondcolor; 
 
     border-color: $secondcolor; 
 
     outline: none; 
 
     margin: 20px auto; 
 
     } 
 
    } 
 
    } 
 
    .carousel .slides { 
 
    .slide-1, .slide-2, .slide-3 { 
 
     height: 500px; 
 
     background-size: cover; 
 
     background-position: center center; 
 
     background-repeat: no-repeat; 
 
    } 
 
    .slide-1 { 
 
     background-image: url(http://i.imgur.com/CK3d6nV.jpg); 
 
    } 
 
    .slide-2 { 
 
     background-image: url(http://i.imgur.com/SlHr4zn.jpg); 
 
    } 
 
    .slide-3 { 
 
     background-image: url(http://i.imgur.com/OAMaVRo.jpg); 
 
    } 
 
    } 
 

 
    @media screen and (min-width: 980px) { 
 
    .hero { 
 
     width: 980px; 
 
    } 
 
    } 
 

 
    @media screen and (max-width: 640px) { 
 
    .hero h1 { 
 
     font-size: 4em; 
 
    } 
 
    }

<div class="carousel-inner"> 
 
      <div class="item slides active"> 
 
       <div class="slide-1"></div> 
 
       <div class="hero"> 
 
        <hgroup> 
 
         <img class="logo" src="images/Logo.png" alt="LOGO"> 
 
         <h3>Lorem ipsum dolor sit amet</h3> 
 
        </hgroup> 
 
        <button class="btn btn-hero btn-lg" role="button">Lorem</button> 
 
       </div> 
 
      </div> 
 
      <div class="item slides"> 
 
       <div class="slide-2"></div> 
 
      </div> 
 
      <div class="item slides"> 
 
       <div class="slide-3"></div> 
 
      </div> 
 
     </div> 
 
    </div>

我使用引導carousel.I我code.I想讓僅幻燈片爲他們移動也是用SCSS從右到左做，但不是課堂上的內容。我希望內容始終保持在原位，我該怎麼做？

來源

2016-11-19 Danelo

我希望我得到了你的問題的權利：

標準的引導與靜態標題：

 <!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <style> 
     .carousel-inner > .item > img, 
     .carousel-inner > .item > a > img { 
      width: 100%; 
     height: 500px; 
      margin: auto; 
     } 
     </style> 
    </head> 
    <body> 

    <div class="container"> 
     <br> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for slides --> 

     <div class="carousel-inner" role="listbox"> 
<!-- start --> 
    <div class="carousel-caption"> 
      <h3>Headline</h3> 
      <p>Tex Tex Tex Text.</p> 
      </div> 
<!-- END --> 
      <div class="item active"> 
      <img src="http://i.imgur.com/CK3d6nV.jpg" alt="Chania" width="460" height="345"> 
      </div> 

      <div class="item"> 
      <img src="http://i.imgur.com/SlHr4zn.jpg" alt="Chania" width="460" height="345"> 
      </div> 

      <div class="item"> 
      <img src="http://i.imgur.com/OAMaVRo.jpg" alt="Flower" width="460" height="345"> 
      </div> 


     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" 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="#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> 

    </body> 
    </html>

但是你想使用你的類並沒有像標籤： 然後你不能使用emtpy div。改用span。 HTML：

<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    .carousel-inner > .item > img, 
    .carousel-inner > .item > a > img { 
     width: 100%; 
    height: 500px; 
     margin: auto; 
    } 
    </style> 
</head> 
<body> 

<div class="container"> 
    <br> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 


    <!-- Wrapper for slides --> 

    <div class="carousel-inner" role="listbox"> 
<div class="carousel-caption"> 
     <div class="hero"> 
        <hgroup> 
         <img class="logo" src="images/Logo.png" alt="LOGO"> 
         <h3>Lorem ipsum dolor sit amet</h3> 
        </hgroup> 
        <button class="btn btn-hero btn-lg" role="button">Lorem</button> 
       </div> 
     </div> 
     <div class="item slides active"> 
    <span class="carussel slide slide-1"></span> 
     </div> 

     <div class="item slides"> 
     <span class="carussel slide slide-2"></span> 
     </div> 

     <div class="item slides"> 
     <span class="carussel slide slide-3"></span> 
     </div> 


    </div> 

    <!-- Left and right controls --> 




    </div> 
</div> 

</body> 
</html>

CSS部分

.carousel { 
    position: relative; 
    height: 500px; 
    .carousel-inner .item { 
     height: 500px; 
    } 
    .carousel-indicators > li { 
     margin: 0 2px; 
     background-color: $maincolor; 
     border-color: $maincolor; 
     opacity: .7; 
     .active { 
     width: 10px; 
     height: 10px; 
     opacity: 1; 
     } 
    } 
    } 

    .hero { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 3; 
    color: #fff; 
    text-align: center; 
    text-transform: uppercase; 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); 
    -webkit-transform: translate3d(-50%, -50%, 0); 
    -moz-transform: translate3d(-50%, -50%, 0); 
    -ms-transform: translate3d(-50%, -50%, 0); 
    -o-transform: translate3d(-50%, -50%, 0); 
    transform: translate3d(-50%, -50%, 0); 
    h1 { 
     font-size: 6em; 
     font-weight: bold; 
     margin: 0; 
     padding: 0; 
    } 
    .logo{ 
     margin-bottom:-5%; 
     width:300px; 
    } 
    } 

    .btn { 
    &.btn-lg { 
     padding: 10px 40px; 
    } 
    &.btn-hero { 
     color: #f5f5f5; 
     background-color: $maincolor; 
     border-color: $maincolor; 
     outline: none; 
     margin: 20px auto; 
     &:hover, &:focus { 
     color: #f5f5f5; 
     background-color:$secondcolor; 
     border-color: $secondcolor; 
     outline: none; 
     margin: 20px auto; 
     } 
    } 
    } 
    .item .slides, .slide-1, .slide-2,.slide-3{ 
    display:inherit; 
    height:500px; 
     background-size: cover; 
     background-position: center center; 
     background-repeat: no-repeat; 
    } 
    .slide-1 { 
     background-image: url(http://i.imgur.com/CK3d6nV.jpg); 
    } 
    .slide-2 { 
     background-image: url(http://i.imgur.com/SlHr4zn.jpg); 
    } 
    .slide-3 { 
     background-image: url(http://i.imgur.com/OAMaVRo.jpg); 
    } 
    } 

    @media screen and (min-width: 980px) { 
    .hero { 
     width: 980px; 
    } 
    } 

    @media screen and (max-width: 640px) { 
    .hero h1 { 
     font-size: 4em; 
    } 
    }

在這裏，你可以看到直播：

http://codepen.io/anon/pen/pNRrPm

來源

2016-11-19 09:12:32

你爲什麼不把你想要的內容放在絕對位於屏幕中間的獨立div中，並給它一個更高的z-index？那麼它不會去任何地方。

來源

2016-11-19 09:01:05 Allan

廣場<div class="hero"></div>外旋轉木馬項目，使其absolute定位。

<div style="position:relative"> 
    <div class="carousel-inner"> 
    <div class="item slides active"> 
     <div class="slide-1"></div> 
    </div> 
    <div class="item slides"> 
     <div class="slide-2"></div> 
    </div> 
    <div class="item slides"> 
     <div class="slide-3"></div> 
    </div> 
    </div> 

    <div class="hero"> 
    <hgroup> 
     <img class="logo" src="images/Logo.png" alt="LOGO"> 
     <h3>Lorem ipsum dolor sit amet</h3> 
    </hgroup> 
    <button class="btn btn-hero btn-lg" role="button">Lorem</button> 
    </div> 
</div>

來源

2016-11-19 09:05:55 Swapna

引導旋轉木馬滑塊 - 只移動滑塊，沒有過多的內容

回答

相關問題