引导轮播滑块 - 仅移动滑块，不移动内容答案

【问题标题】：bootstrap carousel slider - move only the slider, not content too引导轮播滑块 - 仅移动滑块，不移动内容
【发布时间】：2016-11-19 17:12:32
【问题描述】：

.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>

我正在使用引导轮播。我也在我的代码中使用 Scss。我只想让幻灯片像从右到左一样移动，但也不是类中的内容。我希望该内容保持不变一直都在，怎么办？

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案1】：

我希望你的问题是正确的：

带有静态标题的标准引导程序：

      <!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。改用跨度。 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

【讨论】：

【解决方案2】：

你为什么不把你想要的内容放在一个单独的 div 中，绝对定位在屏幕的中间，并给它一个更高的 z-index 呢？然后它不会去任何地方。

【讨论】：

【解决方案3】：

将<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>

【讨论】：