'Bootstrap (4) carousel fix width on slide

I'm attempting to work on my Bootstrap Carousel and I have the problem when the carousel slides ...

The carousel starts this way

Text

And here when it slides

Text

I want to carousel fixed on center without change his width when it slides

Adding a fixed with to carousel-inner works, but this value is dynamic and depends on the image that is uploaded with a form

$(document).ready(function() {
  $('.carousel').carousel()
});
#myCarousel {
  margin-left: 50px;
  margin-right: 50px;
  height: 100vh;
}

.carousel-inner {
  border: 1px solid;
  width: fit-content;
  margin: auto;
}

.carousel-control {
  width: 0%;
}

.car,
car:hover {
  color: #000 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div id="myCarousel" class="carousel slide d-flex align-items-center" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" alt="a" class="img-responsive">
    </div>

    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" alt="b" class="img-responsive">
    </div>

    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" alt="c" class="img-responsive">
    </div>

    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" alt="d" class="img-responsive">
    </div>
  </div>

  <!-- Left and right controls -->

  <button class="car carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
    <i class="fas fa-chevron-left fa-2x"></i>
  </button>
  <button class="car carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
    <i class="fas fa-chevron-right fa-2x"></i>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

This is jsfiddle https://jsfiddle.net/FireFoxII/vhLo2g3j/

cssbootstrap-4


Solution 1:[1]

I add a max-width for img and for the container which contains the image. I commented inline the css code what i added.

$(document).ready(function() {
  $('.carousel').carousel()
});
#myCarousel {
  margin-left: 50px;
  margin-right: 50px;
  height: 100vh;
}

.carousel-inner {
  border: 1px solid;
  width: fit-content;
  margin: auto;
}

.carousel-item {  
  text-align: center;
  max-height: 300px;  /* added **/
}

.carousel-item img { /* added **/
 max-width: 600px;
}

.carousel-control {
  width: 0%;
}

.car,
car:hover {
  color: #000 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div id="myCarousel" class="carousel slide d-flex align-items-center" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/600x300" alt="a" class="img-responsive">
    </div>

    <div class="carousel-item">
      <img src="https://via.placeholder.com/1200x600" alt="b" class="img-responsive">
    </div>

    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" alt="c" class="img-responsive">
    </div>

    <div class="carousel-item">
      <img src="https://via.placeholder.com/600x300" alt="d" class="img-responsive">
    </div>
  </div>

  <!-- Left and right controls -->

  <button class="car carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
    <i class="fas fa-chevron-left fa-2x"></i>
  </button>
  <button class="car carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
    <i class="fas fa-chevron-right fa-2x"></i>
  </button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maik Lowrey

Related Questions