.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 utilizing the bootstrap carousel library along with Scss in my project. My objective is to have only the slides move horizontally from right to left while keeping the content within the classes stationary at all times. How can I achieve this effect?