The Bootstrap Carousel is glitching and cannot be customized using HTML and CSS - I even included a demonstration gif

incorrect output:

https://i.sstatic.net/6kwqT.gif

When observing closely as the carousel transitions from almond 2 to almond 3, there is a slight jump that occurs. Despite multiple attempts, I have been unable to eliminate it. To demonstrate the issue, I have provided a link to the code on CodePen for reference: https://codepen.io/gladwin-james/pen/oNYWJxL. Additionally, I have attached a GIF image above for clearer explanation. The same code used in CodePen has been shared here as well.

HTML

<link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous"
        />

    <!-- About nuts - Slider-->
        ...
... (content truncated for brevity)

CSS

body {
  overflow-x:hidden;
}
.centering_the_slider_contents {
  margin-top: 10px;
  padding-top: 25px;
  width: 100%;
  padding-bottom: -25px;
  text-align: center;
  margin-top: 15px auto;
  background: #ebebeb;
  display: flex;
 
}

.images_in_nuts {
  border-radius: 50%;
  width: 250px;
  height: 250px;
  display: inline-block;
}

.nut_text {
  display: inline-block;
  vertical-align: top;
  margin-top: 30px;
}

.footer_contact_us  {
  margin-top: 10px;
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}

.footer_contact_us_expl {
  text-align: center;
  font-family: "Poppins";
}

I'm struggling to resolve the issue causing this small jump during the carousel transition. Any assistance or solutions provided would be greatly appreciated. I've attempted adding a padding-top of 15px to create some spacing.

https://i.sstatic.net/59kqA.jpg

htmlcssbootstrap-4carousel

Answer №1

body {
  overflow-x:hidden;
}

.about_nuts {
  margin-top: 10px;
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}

.our_services_expl {
  text-align: center;
  font-family: "Poppins";
  
}

.carousel-item
{
margin:20px 0px;

}

.centering_the_slider_contents {
  width: 100%;
  text-align: center;
  background: #ebebeb;
  display: flex;
 }

.images_in_nuts {
  border-radius: 50%;
  width: 250px;
  height: 250px;
  display: inline-block;
  overflow: hidden;
}

.nut_text {
  display: inline-block;
  vertical-align: top;
  margin-top: 30px;
}

// .last_contact_us {
//   background: #ffffff !important;
 }

.footer_contact_us  {
  margin-top: 10px;
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}

.footer_contact_us_expl {
  text-align: center;
  font-family: "Poppins";
}
<link
    rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous"
    />
<div class="about_nuts_main" id="section_about_nuts_main">
    <p class="about_nuts">About Nuts</p>
    <p class="our_services_expl">
        Dont Feel Shy Choose your Favourite Nut and get to know <br/>
        what's inside about it
    </p>
</div>
<!-- About nuts - Slider-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="slider">
        <div class="centering_the_slider_contents">
            <!-- Nut 1-->
            <div class="carousel-item active">
                <figure class="images_in_nuts">
                    <img src="images/almonds.jpg" />
                </figure>
                <div class="nut_text">
                    <h2>Almond</h2>
                    <h3 class="rich_in">Rich In</h3>
                    <p>
                        Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                        Phosphorus, Magnesium, Copper, <br />
                        Phytonutrients, specifically flavonoids, plant sterols,<br />
                        phenolic acids
                    </p>
                </div>
            </div>
            <!-- Nut 1 Ends-->
            <!-- Nut 2-->
            <div class="carousel-item">
                <figure class="images_in_nuts">
                    <img src="images/almonds.jpg" />
                </figure>
                <div class="nut_text">
                    <h2>Almond 2</h2>
                    <h3 class="rich_in">Rich In</h3>
                    <p>
                        Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                        Phosphorus, Magnesium, Copper, <br />
                        Phytonutrients, specifically flavonoids, plant sterols,<br />
                        phenolic acids
                    </p>
                </div>
            </div>
            <!-- Nut 2 Ends-->
            <!-- Nut 3-->
            <div class="carousel-item">
                <figure class="images_in_nuts">
                    <img src="images/almonds.jpg" />
                </figure>
                <div class="nut_text">
                    <h2>Almond 3</h2>
                    <h3 class="rich_in">Rich In</h3>
                    <p>
                        Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                        Phosphorus, Magnesium, Copper, <br />
                        Phytonutrients, specifically flavonoids, plant sterols,<br />
                        phenolic acids
                    </p>
                </div>
            </div>
            <!-- Nut 3 Ends-->
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"
        ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"
        ></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"
        ></script>
</div>
</div>
</div>
</div>
<!-- Everything Related to nuts ends here - Slider Ends-->
<div class="last_contact_us" id="last_contact_us">
    <p class="footer_contact_us">Contact Us</p>
    <p class="footer_contact_us_expl">
        Call us to get Nuts and Spices at a best quality <br />
        and also at a best price
    </p>
</div>
<script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"
    ></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"
    ></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"
    ></script>

To eliminate the bounce effect, you can remove padding-top from .centering_the_slider_contents and add top and bottom margins on .carousel-item for spacing.

Answer №2

You have conflicting parameters:

  1. Two margin top with different spacing and an auto function on it (this one isn't needed);
  2. Padding-top that conflicts with the two margins;

I made adjustments to your code and resolved the conflicts

View the updated code on Codepen.io

body {
  overflow-x: hidden;
}

.centering_the_slider_contents {
  margin-top: 10px;
  width: 100%;
  padding-bottom: -25px;
  text-align: center;
  margin-top: 15px auto;
  background: #ebebeb;
  display: flex;
}

.images_in_nuts {
  border-radius: 50%;
  padding-top: 25px;
  width: 250px;
  height: 250px;
  display: inline-block;
}

.nut_text {
  display: inline-block;
  vertical-align: top;
  margin-top: 30px;
}

.footer_contact_us {
  margin-top: 10px;
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}

.footer_contact_us_expl {
  text-align: center;
  font-family: "Poppins";
}
... (Additional code snippets from original source)

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

The updated bootstrap.min.css file may have compatibility issues with Bootstrap navigation, while an earlier version should work seamlessly

Currently, I am working on developing a menu using bootstrap. When the menu is toggleable, it collapses into a hamburger menu. However, I have encountered an issue where the navigation only works with an earlier version of bootstap.min.css and not with t ...

bootstrap-4

Adjust the width of the container and rotate the text accordingly

I am looking to display text vertically (like a y-axis chart label) and need the ability to rotate text of varying lengths while keeping it on one line. My attempt to achieve this using CSS3 transforms can be seen in this JSFiddle: .rotate { transform ...

csstransform

The pointer-events attribute seems to be inactive and not functioning as expected

I recently implemented a design feature on my website where I created a transparent div at the bottom of the page to overlay a fixed div. The idea was for the fixed div to be revealed as the user scrolled down, but unfortunately, it seems that the click ev ...

csshtmlpointer-events

Tips for adding style to a child component from a parent component with multiple child components

I am faced with a situation where I have a child component in the form of a spinner that I need to display in two different places, each with its own unique style. In order to achieve this, I have attempted the following approach: my-loading-overlay ::ng-d ...

cssangularparent-child

How to switch the active tab using redirection

I am currently facing an issue with my code. The specific problem I am encountering involves setting an active tab after redirecting a user to the page "http://localhost/account#tab-verification". Below is a snippet of the code I am working with: <ul ...

javascriptjquerybootstrap-4tabs

Ways to refresh a div element without causing it to blink

I'm new to web development and I have an HTML webpage that retrieves data from a database and displays information based on the retrieved data. I would like to update the data every second without causing the webpage to blink. Can you please modify th ...

javascriptphphtmlmysqlajax

I need to extract the entire footer, including all HTML elements and text, using PHP's DOMXPath

I am looking to extract the footer content, including all HTML tags and text, using DOMXPath. Here is an example of the HTML structure: <div class="footer"> <div class="footer-new"> <div class="footer-additional"> <div class="add- ...

phphtmlxpathdomdocument

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

javascripthtmlcss

The Django Ajax Comment feature successfully updates and displays new comments, however, it seems to be unable to clear the content from

There was an issue with my comment form where the value wasn't being removed after submission. I had to refresh the page in order to comment again. I need assistance with this problem, specifically referring to the view function and Main JS part. Pl ...

jquerypythonhtmlajaxdjango

What is the best way to dynamically update a progress bar in Vue.js based on changes in JSON data without needing

I am currently working on a Bootstrap dashboard page to track the status of my Python application running on a server. The Python app updates a data.json file on the server side when it reaches a certain status, while Vue.js handles content creation on th ...

vue.jsbootstrap-4progress-barreactive-programmingdashboard

Implementing a redirect and setting a background image dynamically in ASP.NET using code-behind

I have a section in my PHP template with a onclick event handler. My goal is to redirect users to another page when they click on this section. Here's what I've attempted: HTML: <section id="header" onclick="window.location.href='Anoth ...

c#javascriptasp.nethtml

Attempting to change the src of a different image using jQuery upon clicking

I have two separate divs that change their background image source when clicked, which is working fine. However, I would like them to change the other image they are paired with. For example, if div 1 is clicked and becomes "open", then if div 2 is "open" ...

javascriptjqueryhtmlcss

What is the best way to identify if a file is HTML based on the URL?

Is there a way to determine if the file referenced in a URL is an html file? We know it's an html file if it ends in .html or /, but what about .jsp files and other possible extensions for html? If this information can be obtained easily from a URL ...

javahtmlurl

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

Tips for positioning an element so that it remains anchored to the content it is placed within

Hey Everyone! I'm struggling a bit with how to position the h2 headings in my code so that they stay fixed in the top right corner of the box while moving along with the rest of the contenthttps://i.stack.imgur.com/OOVaA.png%60 What I'm attempt ...

htmlcss

implement a click event handler for GLmol (webGL)

Check out GLmol, a Molecular Viewer built on WebGL and Javascript by visiting You can see a demo of GLmol in action at I am interested in adding a click function to GLmol. For example, when I click on a ball, I would like to retrieve information about it ...

javascriptjqueryhtmlthree.jswebgl

Addressing duplicate CSS issues in Firebug?

CSS: .list-a .desc-fix { width: 180px; margin: 0px auto; position: relative; } .list-a .desc { background: url("../images/trans_black.png") repeat; display: block; font-family: arial; font-size: small; height: 18px; mar ...

htmlcssfirebugcss-positioncenter-align

"Presenting Invoice Information on an Invoice Template: A Step-by-Step Guide

Currently, I am working with Laravel 5.7 and VueJs 2.5.*, where I have a table of invoices. My goal is to create a new component that will display a specific invoice based on user selection, allowing them to view or print the chosen invoice. I am still ex ...

javascripthtmllaravelvue.jsvuejs2

What is the technique for applying HTML element formatters to column headers using the to_html method to achieve rotation?

I am currently working with a Pandas DataFrame and I am looking for a way to display it on an HTML page with minimal empty space. Additionally, I am utilizing Bootstrap 4. To format all elements of a column, I can use the to_html method along with table s ...

csspython-3.xpandasdataframebootstrap-4

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

javascriptcssangulartypescriptangular7