Issue with the final transition of the last image in the Bootstrap carousel

I'm currently in the process of creating my own portfolio website. I've integrated a Carousel feature inspired by Bootstrap's example. However, I've noticed some glitches in the transitions between the first or second slides and the third slide, where the images overlap with the next or previous slide. This issue is more noticeable in the mobile version of the website.

You can view the website here: to see the problem firsthand.

Is there a solution to fix this issue? Thank you in advance for any help!

Edit:

The problematic sections are as follows:

<div class="carousel-inner">
          <div class="carousel-item active">
            <img class="image-1" src="images/main-jumbotron-small.png" alt="Main Carousel">
            <div class="container">
              <div class="carousel-caption text-start">
                <h1>Hi, I'm Esteban</h1>
                <p>Engineer, leader and innovator. Click here to know more about me!</p>
                <p><a class="btn btn-lg btn-primary" href="about.html">About Me</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="image-2" src="images/carousel2.jpg"  class="cover" alt="Carousel 2">
            <div class="container">
              <div class="carousel-caption">
                <h1>Deep Learning and Cancer</h1>
                <p>One of my current research projects. Check it out!</p>
                <p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <img class="image-3" src="images/carousel3.jpg"  class="cover" alt;"Carousel 3">
            <div class="container">
              <div class="carousel-caption text-end">
                <h1>Want to know more about my work?</h1>
                <p>Go ahead and click here to check my experience.</p>
                <p><a class="btn btn-lg btn-primary" href="#">My Experience</a></p>
              </div>
            </div>
          </div>
</div>

The issue I'm facing is specifically with the last carousel slide (the last .carousel-item). I haven't made significant modifications to the CSS related to the carousel in the Bootstrap files besides adjusting the image opacity in the slides.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

To resolve the problem, simply replace min-width with width:

.carousel-item > img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
}

Answer №2

Just paid a visit to your website and noticed an error in the console:

Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR ...images/main-jumbotron-small.png

Here's a suggestion:

<img class="image-1" src="/images/main-jumbotron-small.png" alt="Main Carousel">

Ensure to include `/` in all your image links, like this: /images/main-jumbotron-small.png.

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

When the page is scrolled to 50 pixels, a modal pop-up will appear

I attempted to use cookies to store a value when the user clicks on a popup to close it, ensuring that the popup does not show again once closed. However, I am encountering an issue where the popup continues to open whenever I scroll, even after closing it ...

javascriptjqueryhtmltwitter-bootstrap-4

Node.js JSON parser encountering an unexpected undefined error

Whenever I attempt to JSON.parse the string, an error occurs and I receive this message: undefined:1 {"device":"FaclonTest","data":[{"tag":"LATITUDE","value":1903.5091},{"tag":"LONGITUDE","value":07251.0348}]} I'm unsure of where the mistake is. Can ...

javascriptjsonnode.js

"Displaying mongoose date in the HTML5 input type date format (dd/mm/yyyy) is a simple process that can

I have a structured data in MongoDB as shown below: var Person = new Schema({ "Name": { type: String, required: true }, "DOB": { type: Date, "default": Date.now } }); An instance of this schema is created using NodeJs with mongoose ODM: { "N ...

node.jshtmlmongodbmongoosehandlebars.js

How can I eliminate hyperlinks from entire cells within a table using CSS and HTML?

I'm looking to create a web page layout with a footer containing vertically aligned links. To achieve this, I'm currently using a table structure to list out links such as "Mobile", "Help", "Terms", and so on. The issue I'm facing is that t ...

htmlcsshyperlinkhtml-table

steps for using the push method to create a new array in JavaScript

Currently, I am attempting to create a new array that is similar to the myCourses array using the push method. However, for some reason it only seems to be logging one string at a time instead of generating a new array that mirrors the myCourses array: ...

javascriptarrayspush

Creating objects with variable-dependent values in node.js

I'm currently working on creating a user database in an object to assign values to each user, but I'm struggling to find a way to accomplish this. I attempted using var data = {} and then eval(`data.user_${user} = value`), however, it only write ...

javascriptnode.js

Chrome is having trouble loading basic JavaScript

Here's the JavaScript code I have placed inside the head tag of my HTML: <script type="text/javascript"> function over1() { var img1 = document.getElementById("1").src; document.getElementById("big").src = img1; } function out() { ...

javascripthtmlgoogle-chrome

Challenges with Setting up reCaptcha

Issue arises while trying to implement reCaptcha. In the body of my basic HTML page, I have a form with the following content. <form action="/cgi-bin/new_forms/form.pl" method="post" name="pledgeform" onSubmit="return validate(this)"> All form info ...

htmlperlcaptcharecaptcha

Is it possible to utilize npm packages within a standard web page without any frameworks or libraries?

I am currently working on a basic website created using vanilla HTML, CSS, and JS files. My goal is to incorporate the import { moment } from "moment" syntax into my JS files. However, after adding npm to my project, installing moment with npm i ...

javascriptnpmnpm-live-server

In the ASP.NET framework, users can download an Excel file using Response.End, accompanied by a JavaScript loader on the client side. While I have successfully implemented the loader, I

Is there a different approach to displaying or hiding a loader when using Response.write and Response.end, as the client script does not function properly after response.end()? ...

javascriptjqueryasp.netexcel

I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

I have created a movie list component with different attributes in the div section to display the cards in a row. However, all the cards are currently aligned in a column. Should I use flex or grid to achieve the desired layout? If so, how can I implement ...

javascriptcssreactjsbootstrap-5flexboxgrid

Encountering the "React Hook useEffect missing dependency" warning for a state variable that does not actually need to be included in the dependency array

My eslint is throwing an error for react-hooks/exhaustive-deps. I believe my code is correct as the function should only execute when there is a change in the pathname: const pathname = usePathname(); useEffect(() => { setNavigation( navig ...

javascriptreactjsnext.jseslint

Generating an array of objects based on a specified condition

I am working on creating an array of objects. I want to add objects based on a condition, but instead of not adding the object in the array, it is adding false. I have attempted the following: const flag = false; const list = [ { key: 'abc&a ...

javascriptreactjs

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

The occurrences of Swiper events fail to be activated

I am in the process of developing a gallery website that utilizes the Swiper JQuery plugin for slideshows and isotope for grid layout. Each individual item within the gallery has its own slider and corresponding isotope element. The Swiper gallery is in ...

javascriptjqueryfancyboxswiper.jsjquery-isotope

Creating an interactive map on an image using HTML and drawing circles

I've been experimenting with drawing circles on images using the map property in HTML. I have an image set up, and when clicking on the image in JavaScript, I'm adding the area coordinates for the map property. However, I keep encountering a null ...

javascripthtmlimagedictionary

Storing files offline in Firefox 3.5 with file:// protocol

While experimenting with the code for offline storage in Firefox 3.5, I referred to a tutorial on . When the page loads, I am prompted with a dialog asking to store data, but after clicking Allow, the dialog does not disappear. The application functions co ...

javascriptfirefoxfirefox3.5

What steps should be taken to ensure the proper functioning of og: meta tags in NextJS?

Adding OpenGraph meta tags to a page in my NextJS app has presented some challenges. I inserted the meta tags within the <Head> component that is accessible through next/head. After testing the OpenGraph data with tools like the Facebook Sharing Deb ...

javascriptnext.jsfacebook-opengraph

Can the target for orbit controls be set by clicking the mouse?

In my attempt to configure the orbit controls target in three.js, I encounter a challenge. For instance, when using , the camera consistently revolves around the center of the model unless the camera is panned. The desired behavior from the orbit controls ...

javascriptthree.js

Code snippet for positioning a div element above a canvas when clicked on the canvas

Currently, I am working on connecting an HTML5 canvas element with an event listener for clicks to a floating div that will appear exactly where the user clicks on the canvas. Can anyone provide any suggestions or code snippets for the best way to achieve ...

javascripthtmlhtml5-canvas