Danelo Danelo - 16 days ago 11
Sass (Sass) Question

bootstrap carousel slider - move only the slider, not content too



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





I am using bootstrap carousel.I am also using Scss to my code.I want to make only the slides to move as they do, from right to left, but not content from the class too.I want that content to stay in place all the time.How can I do it ?

Answer

I hope i got your question right:

the standard bootstrap with an static caption:

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

But you want to use your classes and no image tags: then you cant use emtpy divs. Use span instead. 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 part

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

And here you could see it live:

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

Comments