Bootstrap Carousel with descriptions in a separate container without any display or hiding transitions

I have created a slider using Bootstrap and some JavaScript code that I modified from various sources. Everything is working well, but I want to remove the transition or animation that occurs when the caption changes.

Currently, the captions seem to slide in and out, but I want them to appear and disappear instantly. I suspect it might be due to something in the Bootstrap JavaScript, but I'm not sure how to address it.

HTML:

<div class="container">
<div data-ride="carousel" class="carousel slide" data-interval="false" id="carousel-1">
    <div class="carousel-inner">
        <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
        <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
        <div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
    </div>
    <div><a href="#carousel-1" role="button" data-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a><a href="#carousel-1" role="button" data-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2" class="active"></li>
    </ol>
</div>
<div id="slider-captions">
    <div>
        <div id="caption-0" class="pp-carousel-caption">
            <p>Paragraph 1</p>
        </div>
        <div id="caption-1" class="pp-carousel-caption">
            <p>Paragraph 2</p>
        </div>
        <div id="caption-2" class="pp-carousel-caption">
            <p>Paragraph 3</p>
        </div>
    </div>
</div>

JavaScript:

$("#carousel-1").on('slide.bs.carousel', function(evt) {

   var step = $(evt.relatedTarget).index();

   $('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide( function() {
        $('#caption-'+step).show();
   });

});

CSS:

.pp-carousel-caption:not(#caption-0) {
    display: none;
}

.pp-carousel-caption:not(#caption-0) {
    display: none;
}

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 sweet syntax for CSS variables available?

What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...

generating a new item using Mongoose searches

How can I generate an object based on queries' results? The table in the meals operates using database queries. How do I handle this if the queries are asynchronous? const getQueryResult = () => { Dinner1300.count().exec(function (err, count) ...

A method for arranging an array of nested objects based on the objects' names

Recently, I received a complex object from an API: let curr = { "base_currency_code": "EUR", "base_currency_name": "Euro", "amount": "10.0000", "updated_date": "2024 ...

"Ensuring Data Accuracy: Validating WordPress Fields with JavaScript

Can anyone provide assistance with this? I've been struggling for some time now. I am in need of a JavaScript code that can compare two fields in a contact form to ensure they match. For example, Phone Number and Phone Number Again. Both fields must ...

Transform an asynchronous callback into an asynchronous generator format

I have the following function from a third-party package that I am unable to modify async function runTransaction(callback) { const client = await createClient(); try { await client.query("BEGIN"); await callback(client); } ...

Is using CSS as an HTML attribute considered poor practice?

I've been noticing an increasing trend of combining HTML, CSS, and JavaScript together in web development. However, I was taught to keep them separate with HTML linking to the sources/scripts. While using the style attribute in HTML is sometimes acce ...

Workbox background sync - Retrieving replayed API responses

Currently, I am utilizing the Workbox GenerateSW plugin and implementing the backgroundSync option within runtimeCaching. You can find more information in the documentation here. This powerful plugin enables me to monitor APIs and successfully retry faile ...

React Native Child Component State Update Issue

In my code, there is a Child component that triggers a function in the Parent component. However, when the function is triggered, an error related to the setState method is thrown. Issue with Promise Rejection (id: 0): The '_this12.setState' i ...

HTML5: Implementing shared web workers for efficient communication across multiple connections

As far as I know, one of the main advantages of HTML5's shared web workers is their ability to handle multiple connections within a single separate thread of execution. I'm curious if anyone has managed to achieve multiple connections working as ...

What is the most effective method for storing an object in React?

I am facing an issue with storing my Object of my Checkout-Cart in a React Variable. I attempted to use the useState Component, but unfortunately, it did not work. Here is the object that I receive from my NodeJs Backend : [ { product_uuid: '3b ...

What is the best way to make a selected link stand out with a highlight?

I'm having an issue with the code below that is supposed to keep the selected link highlighted, but it only flashes the green color on click. Can someone help me figure out what's going wrong here? #sidebarContent a:active{ background-colo ...

How can I delay the ng-show element until the ng-hide CSS transition has finished?

Looking for a simple solution to my implementation issues. I'm faced with the following DOM setup: <h1 class="fade" ng-repeat="child in parent.children" ng-show="parent.activeChild == child">@{{ child.title }}</h1> How can I smoothly fad ...

How can I enable a button in a React application when the text input is not populating

For my Instagram MERN project, I have implemented a Comment box feature for users. The Post button starts off disabled and becomes enabled when text is entered. However, despite entering text, the button remains disabled, preventing submission. Below is th ...

Ways to position a flexbox child at the bottom of its container

Utilizing Flexbox to arrange different content in a panel, there is an issue with the positioning of icons within each panel. The fourth icon wraps around and aligns with the first one at the top of its container, instead of lining up with the third icon a ...

Proper Sequence of Bootstrap Header Configuration

I'm working on creating a header/navbar using bootstrap, but I'm unsure about the correct order and method to achieve this. This is how I want it to look: And when collapsed: Should everything be contained within the NAV tag? I have a header ...

Instructions for using jQuery to replace the final <a> tag within a specific section

Here is a section that I am working with: <section class="breadCrumb"> <a href="/">Home</a> <span class="divider">&gt;</span> <a class="CMSBreadCrumbsLink" href="/SCCU.Stg/Events-Calendar.aspx">Events Calendar ...

AngularJS Cascading Dropdowns for Enhanced User Experience

There is a merchant with multiple branches. When I select a merchant, I want another dropdown list to display the data from merchant.branches. The following code does not seem to be fixing the issue: <label>Merchant:</label> <select ng-if= ...

Experiencing issues with my site's display due to unwanted code plaguing the

I am currently using the latest Divi theme on my WordPress site, and it is in maintenance mode. Recently, I noticed a strange space between the header and the top of the page that only appears on Chrome and IE, but not on Firefox. After inspecting with dev ...

Tips for patiently waiting for an axios request to finish

Within my vuejs application, I am faced with the challenge of initializing an object using data retrieved from an ajax call: let settings = {} api.readConfig().then((config) => { settings = { userStore: new Oidc.WebStorageStateStore(), author ...

Transcluding an element into an ng-repeat template in AngularJS: How can it be done?

Incorporating a carousel directive involves chunking the passed in array of items and mapping it into an array of arrays of elements. This structure then generates markup resembling the pseudo code provided below: <array of arrays> <array of i ...