0

I'm trying to move the caption outside the coursel towards the left side but the problem it's not working. Whenever it moves outside its parent container it stops showing. Can somebody please help me out. Here is a JS bin link --> JSBin

It would be great if anyone could help me out. Thanks

OS: Mac

Browser: Chrome 74.0

Bootstrap version: 4.1.1
Gardezi
  • 2,692
  • 2
  • 32
  • 62

2 Answers2

0

The element with the class carousel-inner has the following declaration set by Bootstrap: overflow: hidden. It prevents any of its children elements placed outside its padding-box to be visible.

To prevent that behaviour, you need to override that declaration with: overflow: visible. Then, to prevent the slides from being shown when moving, you need to wrap the carousel inside another element, add some padding at the bottom of that element to allow the caption to be visible (60px for instance), and set its overflow property to hidden.

So you need to add the following code to your CSS:

.carousel-container {
  padding: 0 0 60px 0;
  overflow: hidden;
}

.carousel-inner {
  overflow: visible;
}
<div class="carousel-container">
  <div class="carousel">
    <!-- The code of the carousel -->
  </div>
</div>
Bruno Stasse
  • 212
  • 1
  • 4
  • this does solves the problem but then I can see the image that is sliding out. – Gardezi May 26 '19 at 16:07
  • Right, I couldn't see that on your JSBin as the carousel takes up the whole width. I edited my answer to prevent that issue, I hope that works for you. – Bruno Stasse May 26 '19 at 18:04
  • the problem still persists. Let me share a screencast – Gardezi May 26 '19 at 18:39
  • It is hard to say what is going wrong here, but maybe the container element is larger in width than the carousel element? It should be the exact same width as the carousel element and have no horizontal padding. I can't reproduce the problem, it works fine in JSBin with the changes from my answer: https://jsbin.com/siyahukiji/1/edit?html,output – Bruno Stasse May 26 '19 at 19:13
0

Set the caption relative to the image:

  .carousel-inner img {
      width: 100%;
      height: 100%;
      position: absoloute;
  }


  .carousel-caption {
    color: #000;
    position: relative;
    float: left;
    left: 0;
    margin-left: 30px;
    margin-top: 30px;
  }
  • this still doesn't solve the problem. The parent container still does not allow me to move the caption outside the container – Gardezi May 26 '19 at 16:08
  • In that case, add `position: absolute` to the parent container, and switch `.carousel-inner img` to `position: relative` –  May 26 '19 at 16:58