Adjust the carousel width on slide in Bootstrap 4

Having an issue with my Bootstrap Carousel where the width changes as it slides.

The carousel starts off fine,

But when it slides,

I want the carousel to stay centered and maintain a fixed width.

Setting a fixed width for carousel-inner works, but it needs to be dynamic based on the uploaded image.

$(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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f4eef6eef1">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067268706877">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

Check out the jsfiddle here.

cssbootstrap-4

Answer №1

I made adjustments to the max-width of the image and its container. I have also included comments in the CSS code to indicate the changes I made.

$(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;  /* adjusted **/
}

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

.carousel-control {
  width: 0%;
}

.car,
car:hover {
  color: #000 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323574d554d52">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c48524a524d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

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

What is the best way to create a button that can cycle through various divs?

Suppose I want to create a scroll button that can navigate through multiple div elements. Here is an example code snippet: <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div ...

javascriptjqueryhtmlcss

Struggling with updating the background color of multiple HTML elements with the same class in real-time

I'm facing an issue with dynamically updating background colors of specific elements using ajax, JSP, and a servlet call. Even though all the lines of code seem to be executing, there is no visible change on the front end. I've attached my JS fun ...

javascripthtmlcssajaxservlets

Troubleshooting problem with divs overlapping in Internet Explorer 7

Check out this webpage: http://jsfiddle.net/aJNAw/1/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

csslayoutinternet-explorer-7

What is the best way to align this alert in the center of the screen

Hey there, I'm facing an issue with aligning an alert horizontally when a user clicks a button. I've been trying different methods but can't seem to get it right. The goal is to keep the alert within #main. You can check out this fiddle for ...

htmlcsstwitter-bootstrap

Achieving Full Row Height in Twitter Bootstrap using CSS Grid

Before jumping to conclusions and marking this question as a duplicate, I want to clarify that I have already explored all suggestions provided on Stack Overflow, including the use of display: table. Unfortunately, none of them seem to work smoothly with B ...

htmlcsstwitter-bootstrap

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

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

javascripthtmlcss

Creating an Unordered List in GWT that Includes List Items

I've hit a roadblock while trying to create a css-driven menu in GWT. The menu should be rendered exactly like this: <div class="topbar"> <div class="container fixed"> <h3> <a href="" class="logo">test& ...

htmlcssgwttwitter-bootstrap

Incorporate concealed image into HTML

When I perform actions with a couple of images, I encounter delays because the browser needs to load the images. For example, if I use $('body').append(''); everything works smoothly without any delays. However, when I try using style= ...

javascriptjqueryhtmlcsscaching

The image is non-adjustable to different screen sizes

Currently, I am in the process of revamping a friend's website using Next.js and Tailwind. However, I've encountered a challenge with the background image specifically on iPhones. While it appears fine on browsers like Chrome and Safari as well a ...

cssreactjsimagenext.jstailwind-css

Having trouble with jQuery's recursive animation functionality

I have developed a function to scroll multiple images horizontally in the header of my website. Inside my header, I have implemented code that looks like this: <div class='images'> <!-- this div is 150% wide with overflow hidden --> ...

jquerycssanimation

Is it possible to execute a program on MacOS through a local HTML website?

Are there any straightforward methods to launch Mac programs using HTML? I've created an HTML page featuring a text field and several buttons. The goal is for users to enter a code (numbers) that will then be copied to the clipboard. By clicking on t ...

javascripthtmlcssmacosapplescript

Ensuring that the initial column of a table remains in place while scrolling horizontally

Thank you for taking the time to read this. I am currently working on a table within a div container (div0) where the data is dynamically generated, resulting in a table with unpredictable height and width. The outer div allows for both vertical and horizo ...

javascriptjquerycsshtml

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

cssless

Require assistance with displaying a menu on a website using JQuery

Is there a way to create a menu similar to the one shown in the image below?https://i.sstatic.net/QxNPL.png To learn more about this menu, you can visit their website by clicking on this Link. I have copied some code (HTML code and links to CSS and .js fi ...

javascriptjqueryhtmlcss

The aria-expanded attribute is not functioning as expected in a bootstrap template

I recently downloaded a template from this website: Within the template, there is a page named cards.html On this page, there is an example of a collapsible card. I am attempting to make it load in a collapsed state so that the user has to manually expan ...

bootstrap-4

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

jqueryhtmlcssslider

Using the ng-class directive to dynamically set classes based on the value returned from

I am facing an issue with setting the icon style based on a value returned from the controller. The console log confirms that the value is triggered correctly, but it appears that there is a problem with the Ng-class expression. Any assistance on this matt ...

javascriptcssangularjshtmlionic-framework

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

The choices in the cell table selection are obscured due to the select table's height when opened

I am experiencing an issue with a table where each row contains two cells with "select" options. The problem arises when I open them, as they load within the table and the available options are not clearly visible. I can only view all the options by scroll ...

javascripthtmljquerycsstom-select