`Slide bootstrap carousel without moving other elements`

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

htmlcsstwitter-bootstrapsass

Answer №1

Thank you for your question. Here is a custom implementation using classes instead of image tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Custom Bootstrap Example</title>
  <meta charset="utf-8>
  <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>
</head>
<body>

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

    <div class="carousel-inner" role="listbox">
      <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 class="item slides active">
        <span class="carousel slide slide-1"></span>
      </div>

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

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

  </div>
</div>

</body>
</html>

CSS Part:

.carousel {
  position: relative;
  height: 500px;
}

.carousel .carousel-inner .item {
  height: 500px;
}

.hero {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

.btn {
  &.btn-lg {
    padding: 10px 40px;
  }

  &.btn-hero {
    color: #f5f5f5;
    background-color: $maincolor;
    border-color: $maincolor;
  }
}

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

You can view the live demo here.

Answer №2

Instead of risking your content moving around, consider placing it in a separate div with absolute positioning at the center of the screen and giving it a higher z-index. This way, it will remain in place without any issues.

Answer №3

Take the 

<div class="hero"></div>
element out of the carousel item and position it absolutely.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered a problem while trying to update a list item in Vue.js

Greetings Everyone, I've successfully implemented a basic CRUD functionality in VueJS. The values are being inserted into a list, from which I can read and delete them. However, I'm facing an issue with updating any value. When I try to ...

htmlvue.js

ReactJS does not trigger a re-render when changes are made to CSS

I'm curious about the reason why ReactJS does not automatically reapply CSS to child components even when componentDidUpdate() is called. I conducted a small demo where adding a new box doesn't change the color of existing boxes, even though the ...

javascriptcssreactjs

Unable to modify the value of an HTML dropdown list

My latest project is a website located at pg.wcyat.me (Source code), where I utilized github.com/thdoan/pretty-dropdowns for dropdown menus. Using JavaScript, I am able to dynamically change the values of select lists. For example: document.getElementById( ...

javascripthtmljqueryhtml-select

Java Chatclient with a User-Friendly HTML Interface

My team is embarking on a new project involving the development of a Chatclient to be integrated into a webapp. Our requirements include: - Java server - Java client We have nearly completed coding both the client and server, but now we face the challe ...

javahtmlapplet

Creating an interactive HTML form that updates in real-time based on user input can be achieved using vanilla JavaScript. This allows for a

I am working on a form that dynamically generates more form fields based on a user input value. <form> <input type="Number" name="delivery"> </form> For example, if the user enters '3', it should automat ...

javascripthtmlnode.jsformsinput

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

javascripthtmlreactjsmaterial-ui

Problem with CSS hovering on images when hovering on links?

While attempting to add 2 hover images to my website, I encountered an issue where a black border appeared in the middle of the images. This was caused by the hover effects on the links. Below is the code snippet: a:hover,a:active { color:Black; o ...

htmlcss

What is the best way to incorporate a PHP file into an HTML file?

Below is the code snippet from my index.php: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Voting Page</title> <script type="text/javascript" src="js/jquer ...

javascriptphpjqueryhtml

TinyMCE generates HTML code with embedded tags

Hey there, I'm currently facing an issue with TinyMCE that I just can't seem to solve. I've browsed through some related posts but haven't found a solution that works for me... For example: When I input something in my back office, ...

javascriptphphtmlencodingtinymce

Cursor hovers over button, positioned perfectly in the center

I am facing a challenge with implementing a hover function for a set of buttons on the screen. The goal is to display the mouse pointer at the center of the button upon hovering, rather than the actual position of the cursor being displayed. I have tried u ...

javascriptjquerycsspointerlock

Trouble displaying background image in Electron Application

When I try to load an image file in the same directory as my login.vue component (where the following code is located), it won't display: <div background="benjamin-child-17946.jpg" class="login" style="height:100%;"> A 404 error is popping up: ...

htmlcsswebpackvue.jselectron

Ensure that the innerHTML of the span tag does not contain line breaks

Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted usin ...

csswidthlinebreak

Embed the website onto a webpage using ajax or an iframe without any need for navigation

I have a unique challenge ahead. Imagine there are two websites, one is a web page and the other is hosted within the same domain. My goal is to load the entire second website into a div or iframe of the first web page, similar to how a free proxy browser ...

javascriptajaxhtmljquery

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes. data() { return{ selected:{ index: 2 } } } <style> .parent-table >>> .table-row:nth-child(/* here I intend to use ...

javascriptjquerycssvuejs2vuetify.js

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

javascripthtmlcsstwitter-bootstrapz-index

How to turn off validation for md-input-container in Angular 2

While working on a form in Angular 2, I encountered an issue when adding the required attribute to my <input>. The problem resulted in unwanted margins as shown in this image: I am seeking a solution to only apply the second red margin to the input ...

cssangularangular-material2

Can a JavaScript function spontaneously run without being called upon?

<a onclick="determineCountry(data)" class="installbtn">Install</a> My goal is to have the user redirected to one of three sites based on their location when they click the button above. However, there seems to be an issue with the script below ...

javascripthtmlgeolocation

Ensure that the textbox remains valid when the reset button is clicked in Bootstrap

After implementing the code for bootstrap textbox and textarea, I encountered an issue when using the reset button. When entering an invalid shop name followed by a valid address and clicking on the Reset button, it resets the form. However, if I then only ...

javascriptjqueryhtmlcsstwitter-bootstrap

What could be the reason behind the lack of vertical centering for the Spartan

I can't seem to figure out why my font isn't aligning vertically correctly. I'm using the Spartan MB font from Google, but it just doesn't look right, you can see here. https://i.stack.imgur.com/wbLc2.png This is my HTML code: <htm ...

htmlcssfonts

What is the best way to implement form fields that have varying validation patterns based on different conditions?

Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...

javascripthtmlformsvalidation