The functionality of the Bootstrap 4 Carousel featuring multiple items is experiencing malfunctions

I'm encountering an issue with my Bootstrap 4 card carousel. When the next or prev buttons are clicked, there is a strange transition effect. Additionally, in the mobile version, the buttons do not work properly. It seems that when the card slides to the next or prev position, the cards appear to be on top of each other for a brief moment, creating a double card transition effect.

Here is the code snippet:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="  false">
    <div class="carousel-inner py-5">
        <div class="carousel-item active  ">
            <div class="col-md-4 newscard">
                <div class="card card-body">
                    <div class="card-img-top card-img-top-250">
                        <img class="img-fluid" src="https://via.placeholder.com/250" alt="img">
                        <h2>Lorem ipsum dolor sit amet, consectetur</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mi tellus, fringilla eu semper nec, luctus ac nisl.</p>
                    </div>
                </div>
            </div>
            ... Repeat similar structure for other cards ...
        </div>
    </div>
    ... Carousel control buttons ...
</div>

CSS

  /* CSS styling goes here */

Jquery and JS

/* JS code snippet */
javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

It is possible that you have linked a CDN other than Bootstrap 4, or you may want to consider using Owl Carousel for a responsive layout.

Here is a sample Bootstrap 4 Carousel code:

<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul> 
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- Items or elements that will be used in the carousel -->
    </div>
    <div class="carousel-item">
      <!-- Items or elements that will be used in the carousel -->
    </div>
    <div class="carousel-item">
      <!-- Items or elements that will be used in the carousel -->
    </div>
  </div>
 
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Please verify your CDN link or compare your code with this example. I recommend upgrading to Bootstrap 5 for a more advanced version.

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

JS Nav Dots are not activating the Active Class

I have been utilizing a code snippet from this source to incorporate a vertical dot navigation feature into a single-page website. The navigation smoothly scrolls to different sections when a link is clicked, with an active highlight on the current section ...

javascripthtmlcssnavsquarespace

Issue with jQuery selector when handling AJAX response

I've been scratching my head trying to understand why this code isn't functioning as expected. To make things clearer, I created a simplified version of the issue on jsFiddle, where it works perfectly. Here's what I'm trying to achieve ...

javascriptjqueryajax

Ensure all fields are valid prior to performing an update

I'm currently faced with the challenge of validating my form data before executing an AJAX update. Essentially, what I want to achieve is to validate the input data in the form before triggering the ajax update function. I'm unsure about where to ...

javascriptjqueryajaxspringvalidation

Performing a task after a process has finished

Currently, I'm working with node JavaScript and facing an issue where I need to run a new function after a loop has completed. In the code snippet provided below, // loop through objects in data, to process it represents a basic for loop iterating ove ...

javascriptnode.js

Building a versatile dropdown menu with ReactJS and creating reusable components

I am currently working on building a dropdown menu following a tutorial, but I have encountered a roadblock. Instead of using the "props" keyword as shown by the instructor in the tutorial, I passed the props directly as arguments without using props dot. ...

javascriptreactjsnext.js

Ways to transfer data from JavaScript to Wicket framework

My Javascript method executes business logic on the client side and returns a value. I now want to access this value in my Wicket page. What is the most effective approach for achieving this? P.S. I am currently using Wicket 7. ...

javascriptjavawicketwicket-7

Issue: Actions should be in the form of plain objects. However, the given type is 'Promise'. To resolve this, consider incorporating middleware into your React Native store

Currently, I am facing an issue while trying to retrieve products from Firebase. Despite having redux-thunk installed to manage promises and using middleware in my store, I encountered the following error: Actions must be plain objects. The actual type d ...

javascriptreactjsreduxreact-reduxredux-thunk

Incapable of modifying the inner content of a table

I am completely new to AngularJS and struggling with updating the inner HTML of a table. I have a variable that contains a string with three types of tags: strong, which works fine, and nested tr and td tags. However, when I try to replace the table's ...

javascriptangularjsinnerhtml

The issue with Webpack chunking is that no content is appearing because the chunks are not

For the past day, I've been trying to resolve a frustrating yet seemingly simple problem. My goal is to split my bundle.js file into chunks to enhance website loading speed. Below is my webpack.config file: module.exports = { devServer: { historyApi ...

javascriptreactjswebpackchunkschunking

Refactor Print Preview Graph Display Issue within Nested Vue Component

I seem to be having trouble accessing this function properly due to an error. I am unsure of how to troubleshoot this issue and determine the correct solution. Any guidance would be greatly appreciated. The component PerformanceDonut.vue is located within ...

javascriptvue.jsvuejs2vue-component

Error: global not declared in the context of web3

I've been attempting to integrate Web3 into my Ionic v4 project for some time now. However, I keep encountering errors when I try to serve the project. Specifically, I receive an error message stating that Reference Error: global is not defined. Cre ...

javascriptnode.jsangulartypescriptionic-framework

Unable to locate the image file path in React.js

I'm having trouble importing images into my project. Even though I have saved them locally, they cannot be found when I try to import them. import {portfolio} from './portfolio.png' This leads to the error message: "Cannot find module &apos ...

javascriptreactjstypescriptimage

Enhance the connectivity of Angular js by activating the link function post transclusion

I am facing an issue with Angular where I have two directives that need to be transcluded within each other. However, I am unable to access the DOM using a simple JQuery selector after the transclude function has been executed. Specifically, I need to comp ...

javascriptjqueryangularjsangularjs-directiveangularjs-ng-transclude

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...

javascriptjqueryhtmljson

An unforeseen repetition of jQuery Ajax calls

I'm currently working on an application that utilizes ajax calls to load content. However, I've encountered a situation where an ajax call goes into a loop but seems to end randomly. Below is the code sequence starting from a double click event l ...

javascriptjqueryajax

Designing access to data in JavaScript

As I work on developing my single page app, I find myself diving into the data access layer for the client-side. In this process, a question arises regarding the optimal design approach. While I am aware that JavaScript is callback-centric, I can't he ...

javascriptjquerysingle-page-application

CSS - a collection of hyperlinks to browse. the pseudo-element a:visited::before is not behaving as anticipated

Here's what I'm looking to achieve: http://codepen.io/anon/pen/KaLarE I want to make a list of links, each with a checkbox in front. Then, I want to be able to check the boxes for visited links. I attempted this approach, but unfortunately, it ...

htmlcss

A step-by-step guide to customizing the Material UI Chips delete SVG icon to appear in white color through

Using a Material UI component, I added a custom class to my chip. Attached is a screenshot showing what I mean. Currently, I am attempting to change the color of the cross button to white. After inspecting the element, I discovered that it is an SVG ico ...

htmlcssreactjstypescriptmaterial-ui

Navigate through the list of options by scrolling and selecting each one until the desired element is

Hey, I've got this AngularJs directive that selects an item based on the "key-pressed" event, and it's working perfectly. The issue arises when there is a scroll bar since the elements get hidden, making it difficult for me to see them. You can ...

javascripthtmlcssangularjs

Can you share the outcomes of executing a Node.js program in real-time?

Is there a method to execute a program (such as tcpdump) and have nodejs capture the console output in real-time to display in an HTML format without saving it? I am interested in running a program that displays information in the console, with the capabi ...

javascripthtmlnode.jsbashshell