Bootstrap carousel slide animation isn't transitioning properly

I am encountering an issue with my carousel animation.

I am aiming for a slide-out/slide-in effect similar to the Bootstrap website, but instead of sliding out, the old item simply disappears and the new item slides in.

I have included a GIF to illustrate the problem.

Has anyone faced a similar problem? Could it be a code error?

<div class="container-fluid b2 pt-5 pb-5">
  <div class="row text-center">
      <h1>
          Why Choose Us
      </h1>
  </div>
  <div class="row justify-content-center">
      <div class="col-4 centeralign">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur consequuntur maiores sapiente placeat quis dolorem repellendus.</p>
      </div>
  </div>
  
  <div id="carouselExampleIndicators" class="carousel slide d-lg-none" data-ride="carousel" data-slide="true">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner pb-5 pt-5">
      <div class="carousel-item active">
        <div class="row justify-content-center">
          <div class="col-6 padelcarousel">
            <img src="/styles/iconcheck.png" height="75px" width="75px" alt="">
            <h3>Intuitive interface</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row justify-content-center">
          <div class="col-6 padelcarousel">
            <img src="/styles/iconfile.png" height="75px" width="75px" alt="">
            <h3>Performance tracking</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row justify-content-center">
          <div class="col-6 padelcarousel">
            <img src="/styles/iconpuzzle.png" height="75px" width="75px" alt="">
            <h3>High quality content</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer №1

Utilize the Bootstrap Starter Template first, then analyze and address the issue. Once resolved, insert your code after the body tag to fix the problem.

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

A simple way to initiate an AJAX call once the page has completed loading is by using the `window.location.href` as the

I encountered an issue with my event listener setup function navBtn() { $('#navBtn').on('click', (event) => { window.location.href = 'someotherfile.html'; myAJAXrequest(); }) } The problem I'm facing is that ...

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

Having trouble with centering my div in HTML and CSS

Coding Challenge .nav_bar { position: absolute; top: 0; width: 800px; height: 23px; display: inline-block; text-align: center; background-color: #0090bc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 2px solid #004D6F; -web ...

Obtain the URL found within the href tags

Is there a way to extract the links from the href tags? When I coded it, the entire 'a' tag is showing up... Here's the code: page = urllib2.urlopen('https://www.meetup.com/') soup = BeautifulSoup(page, 'lxml') categor ...

"Pressing the 'back' button on your browser takes

Is there a way to navigate back to the main page by clicking on an image? After selecting First, Picture1 will be shown. How can I go back to the selection page for further choices? <a href="picture1.jpg"> <h3>First</h3></a> <a ...

The impact of Opacity CSS on child elements in web design

Struggling to show an error message when a user disables JavaScript. In my current work, I have two div layers - one covering the entire page and another on top to display the warning message. However, I'm facing issues with the opacity settings affec ...

JQuery, Draggable delete

I created a shopping cart with drag-and-drop functionality for nodes. http://jsfiddle.net/dkonline/Tw46Y/ Currently, once an item is dropped into the bucket (slot), it cannot be removed. I'm looking to add that feature where items can be removed from ...

Element receives scrollbar upon reaching 100% width

I am intrigued as to why the overflow: auto; rule is causing a scrollbar to appear in this particular scenario CSS: textarea { width: 100%; margin:0; padding:0; } .span4 { width: 300px; } aside { overflow: auto; } html: <asid ...

What is the solution to eliminating the MultiValueDictKey error when making an AJAX get request?

When handling multiple divs on a web page, each containing a form, I encountered the need to utilize AJAX Get functionality. The goal was to pass the text entered into a form along with the ID of the corresponding div to a Django view for storage in a data ...

What is the best way to adjust an image's dimensions to fit a specific screen size without distorting it on a webpage?

Currently working on a website, and the top section has a small column on the right with an image taking up the majority of the space to the left. The problem arises when the image spills over the screen size, messing up the overall layout of the page. I d ...

Utilize JQuery to inject both standard HTML elements and safely rendered escaped HTML onto a webpage

After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...

Can a website be designed to render consistently across all browsers without relying on a CSS reset?

Is it possible to create a website that renders well across all browsers without using CSS reset? Should CSS reset be used for websites of all sizes - small, one-page, large? Is it better to write all the CSS without a reset and only address necessary rend ...

What is the best way to conceal a bootstrap directive tooltip in Vue.js for mobile users?

Currently, I'm tackling a project with Vuejs and Laravel. There's a tooltip directive incorporated that relies on Bootstrap's functionality. Check it out below: window.Vue.directive("tooltip", function(el, binding) { // console ...

How DataTables Handles Loading and Rendering Time Delay

Utilizing DataTables in conjunction with Bootstrap 4 for client-side processing while displaying approximately 2,000 records. The loading time is acceptable, but upon refreshing the page (F5), I observe an unformatted DataTable briefly appearing. It seems ...

Upon selecting the hamburger menu, the menu pops up; however, the homepage text is visible overlapping the menu

I'm in the process of developing a responsive portfolio page using ReactJS and Tailwind CSS. When the screen size is smaller than the medium breakpoint, a hamburger menu icon appears. However, when I click on the hamburger icon to view the menu items, ...

Analyzing various array values to modify the status of a table

In the case of three records, the goal is to compare the values of 'test1' and 'test2' and then update the database to either 'open' or 'close' if the 'test1' and 'test2' values of the three recor ...

Add the application's logo image to the Ionic header along with a side menu

When attempting to place the app logo image in the center or left of the Ionic header with vertical alignment, it seems to shift to the top instead. The code I am currently using to display the logo is causing some issues: <ion-view view-title="<im ...

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

Unlimited highway CSS3 motion

I have come across a stunning 2D Highway background image that I plan to use for my mobile racing game project which involves JS and CSS3. The image can be found at this link. My goal is to create an animation of the road in order to give players the illu ...