Expansion of border in Bootstrap carousel with each slide progression

I am working on creating a bootstrap5 carousel that includes a video with fixed dimensions and a box-shadow applied to it.

However, I am facing an issue where the box-shadow expands during each slide transition, making it appear as if the video element's height/width has changed.

I need assistance in figuring out how to keep the box-shadow in the same position, preventing any messy or buggy transitions:

snippet:

.monkey-video {
    /* box-shadow: 0px 0px -60px -40px rgba(255, 255, 255, 0.35) inset; */
    width: 200;
    height: 240;
    box-shadow: rgba(255, 255, 255, 0.35) 0px 5px 15px;
} 
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d3628362a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e253a2538">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<body class="bg-dark">
<section id="chars-section" class="position-relative" style="width: 100%;">
                <div class="d-flex flex-column justify-content-evenly align-items-center ">

                    <h3 class="p-1" style="font-family: 'league_spartanbold'; color:   #F8C84A;">MEET THE MONKEYS</h3>

                    <div id="carousel-monkeys" class="carousel slide carousel-fade" data-bs-ride="carousel">
                        <div class="carousel-inner monkey-video">
                          <div id="0" class="carousel-item active">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Neandermonkey - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                          <div id="1" class="carousel-item">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Medieval - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                          <div id="2" class="carousel-item">
                            <div class="d-flex justify-content-center w-100">
                                <video width="200" height="240" autoplay muted loop>
                                    <source src="./img/Futuro - Vídeo.mp4" type="video/mp4">
                                    Your browser does not support the video, please use a different browser.
                                </video>
                            </div>
                          </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-monkeys" data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carousel-monkeys" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>

                </div>
            </section>
            </body>

javascripthtmlcssbootstrap-4

Answer №1

An issue arises with the #carousel-monkeys element as its width expands during the transition of carousel items. To resolve this, make sure to set a fixed width on the #carousel-monkeys element that matches the video width. Here is a suggested solution:

<html>
   <head>
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272072c3a383784595d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4a6ababb0b7b0b6a5b484f1eaf5eaf7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
      <style>
         #carousel-monkeys {
         width: 200px;
         }
      </style>
   </head>
   <body class="bg-dark">
      <section id="chars-section" class="position-relative" style="width: 100%;">
         <div class="d-flex flex-column justify-content-evenly align-items-center ">
            <h3 class="p-1" style="font-family: 'league_spartanbold'; color:   #F8C84A;">MEET THE MONKEYS</h3>
            <div id="carousel-monkeys" class="carousel slide carousel-fade" data-bs-ride="carousel">
               <div class="carousel-inner monkey-video">
                  <div id="0" class="carousel-item active">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
                  <div id="1" class="carousel-item">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
                  <div id="2" class="carousel-item">
                     <div class="d-flex justify-content-center w-100">
                        <video width="200" height="240" autoplay muted loop>
                           <source src="./video.mp4" type="video/mp4">
                           Your browser does not support the video, please use a different browser.
                        </video>
                     </div>
                  </div>
               </div>
               <button class="carousel-control-prev" type="button" data-bs-target="#carousel-monkeys" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
               </button>
               <button class="carousel-control-next" type="button" data-bs-target="#carousel-monkeys" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
               </button>
            </div>
         </div>
      </section>
   </body>
</html>

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

Is there a way to verify if a module is already present in Angular?

Currently I am verifying if angular is already aware of my module using the following code snippet: try { angular.module('myModule'); } catch (err) { angular.module('myModule', []); } Is there a more efficient way to accomplish th ...

javascriptangularjs

Is there a way to eliminate get variables and filename from a URL using JavaScript or jQuery?

I've been researching this issue, but unfortunately, I haven't been able to find a definitive solution for my specific needs. Let's say I have a URL like... How can I extract this URL and remove the "index.php?search=my+search" part so that ...

javascriptjqueryregexurlvariables

Is it secure to use ES6 in Typescript with nodejs/koa?

As I transition to using TypeScript in a Node.js/koa project, I came across the need to modify the .tsconfig file to target ES6. Otherwise, an error message will appear stating: Generators are only available when targeting ECMAScript 6 or higher. // index ...

javascriptnode.jstypescript

Animate failed due to the appending and adding of class

$('#clickMe').click(function() { $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn'); }); <link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/> <script ...

javascriptjquerycssanimationanimate.css

How can I input text into separate tabs using a specific method?

I've been struggling with this issue for a while now and here's the code I have so far: <html> <head> <script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></scr ...

javascripthtmlcsstabslogic

Encountering an issue with html2canvas: receiving an error message stating "object

To print the div using Javascript, I encountered an issue with the generated barcode not appearing in the printed page. This led me to use the html2canvas approach to 'render' the div before printing it out. Here is the code snippet: HTML: < ...

javascriptphphtmlhtml2canvas

JavaScript tool package with non-JavaScript alternative

Currently in search of a reliable Javascript widget toolkit that boasts a modern UI design like Dojo, incorporates AJAX for navigation, and effects. Essential requirement is flexibility and seamless fallback to an HTML-only version for console users. Whi ...

javascriptajaxuser-interfacewidgettoolkit

Explaining the process of supplying an event to the setState function

I'm struggling with the following code snippet: h(e) { console.log(e.target.value); this.setState(state => { return {editData: e.target.value}; }); } Unfortunately, it seems like it's not working as e ...

javascriptreactjssetstate

What is the best way to trigger a jQuery function when an option is selected from a Select2 dropdown menu?

I have implemented Select2 for custom dropdown styling. The options are structured like this: <option value="001,100">Option 001</option> <option value="002,200">Option 002</option> <option value="003,300">Option 003</opti ...

javascriptjqueryjquery-select2jquery-select2-4

Optimizing Three JS computeVertexNormals() for Improved Performance

I have a massive buffer geometry consisting of approximately 4 million vertices that requires a small area of shading to be updated. Currently, I randomly update the vertex normals causing lag. I attempted using updateRange.offset on the geometry but it se ...

javascriptthree.js

Remove input fields that were generated upon clicking a button

I'm facing an issue with my code that allows me to add inputs using @click="addInput()". However, I am struggling to delete specific inputs using @click="deleteInput(). When I try to delete an input with this.inputs.splice(index, 1), on ...

javascriptvue.jsvuejs2bootstrap-vue

Access information from an array in Angularjs and transfer it to an identifier

I am facing an issue with passing values from the view to the controller and storing them in an array. My goal is to then retrieve a value from the array and pass it as the id value in the update method. Here is my current setup: HTML <label class="c ...

javascriptarraysangularjs

Data cannot be transferred to a child element unless it has been initialized during the definition phase

Passing an array data from parent to child component has brought up some interesting scenarios: parent.component.html: <child-component ... [options]="students" > </child-component> Status I: Setting the array on definition ...

javascriptangulartypescript

Material-UI and TypeScript are having trouble finding a compatible overload for this function call

Currently, I'm in the process of converting a JavaScript component that utilizes Material-ui to TypeScript, and I've encountered an issue. Specifically, when rendering a tile-like image where the component prop was overridden along with an additi ...

javascriptreactjstypescript

Changing the height of one Div based on another Div's height

I currently have a display of four divs positioned side by side. I am seeking a solution to ensure that the height of each div remains consistent, and should adjust accordingly if one of them increases in size due to added text content. For reference, ple ...

javascriptjqueryhtmlcss

How to extract a variable value from a different HTML page using jQuery

I have an HTML page named "page1.html" with the following content: <div> <div id="content"> content </div> <script type="text/javascript"> var x=5; var y=2; </script> <div id="ot ...

javascriptjqueryajaxget

I find myself constantly needing to refresh the page just to trigger my ajax request to update text in my Django

I have a follow button that utilizes ajax functionality. The total number of followers, {{ total_followers }}, increases or decreases correctly upon a click. However, the follow and unfollow buttons only update when I refresh the entire page, which is not ...

javascriptjquerypythonajaxdjango

Assistance is needed in creating a compact HTML website

I've designed a small PSD Mockup of an about page for my website. However, I lack the knowledge to code in HTML and CSS. Here is the current code snippet: index.html <html> <link rel=StyleSheet href="css.css" type="text/css"> <head&g ...

htmlcss

AngularJS: Substates not rendering properly

I'm encountering issues while trying to incorporate nested states in my project. Although the View template and JavaScript calls are being made and loaded, the screen is not changing - in other words, the nested screen is not displaying. http://{dom ...

javascriptangularjshttpangular-ui-routersingle-page-application

Hold on until all child elements are attached to the DOM in AngularJS

I am working with an AngularJS 1.7.2 component that includes several nested components: | parent | - child | - - child1 | - - child2 Within the parent component, I need to access the child1 component, specifically where the template starts with <div ...

javascriptangularjsdom