How to eliminate spacing between slides in a 3D Carousel Slider using Bootstrap 5

My website utilizes Bootstrap along with a carousel slider, which is functioning properly. However, I am encountering an issue when the slider transitions from right to left. It briefly displays a white space between slides, which I wish to eliminate. I want the second image to seamlessly appear immediately after the first one without any gap in between.

I aspire for my slider to function like this demo

.carousel-item {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.carousel-inner {
  display: flex;
  flex-wrap: nowrap;
  /* Prevent items from wrapping */
  gap: 1rem;
  /* Add some space between carousel items */
  overflow: hidden;
  /* Hide the overflow to prevent extra spacing */
  perspective: 1000px;
}

.carousel-item {
  flex: 0 0 calc(33.333333% - 1rem);
  /* Calculate the width with gap */
  transform: translateZ(-200px);
  backface-visibility: hidden;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52303d3d26212620332212677c617c61">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://placehold.co/800x400" class="d-block w-100" alt="Image 1">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/800x400" class="d-block w-100" alt="Image 2">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/800x400" class="d-block w-100" alt="Image 3">
    </div>
    <!-- Incorporate more carousel items as needed -->
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f829f82">[email protected]</a>/dist/js/bootstrap.min.js"></script>

You may notice the presence of white space in the current setup, but I aim to have the subsequent image appear seamlessly after the previous one in my carousel.

javascripthtmlcsstwitter-bootstrapbootstrap-5

Answer №1

If you're looking for advanced carousels, it's recommended to use a specialized library like Swiper.

Avoid using slick, as GrafiCode mentioned, since it hasn't been maintained since 2017.

Here is an example that achieves the desired effect: https://codepen.io/iamdineshbasnet/pen/XWxpjaQ

var swiper = new Swiper(".mySwiper", {
    effect: "coverflow",
    centeredSlides: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false
    },
    loop: true,
    slidesPerView: "2",
    coverflowEffect: {
        rotate: 0,
        stretch: 30,
        depth: 100,
        modifier: 5,
        slideShadows: true
    },
    navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next"
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: false
    }
});
html,
body {
    position: relative;
    height: 100vh;
}

... (CSS code continues) ...

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07405546434735...   

<!-- Swiper -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        ... (HTML code continues) ...
   
    </div>
    <div class="swiper-controller">
        ... (HTML code continues) ...
        
    </div>
</div>

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

Activate fullscreen mode in Krpano on desktop by clicking a button

Is there a way to activate fullscreen mode upon clicking a button? I believe I should use the code: krpano.set(fullscreen,true); Currently, I have an image within a slideshow that includes a play button overlay. Once the button is clicked, the slideshow ...

javascriptjqueryapikrpano

Incorporate jQuery on elements that are dynamically loaded after the page has finished loading

I need to determine if a dynamically added button is enabled or disabled. How can this be achieved? My goal is to display a message when the button is disabled and remove it when the button becomes enabled. This is my current code: jQuery(document).read ...

javascriptjqueryhtml

Production website fails to display updated data while the localhost version operates without issues

Having trouble fetching data from my database in a production setting. The code functions fine on localhost, but fails to grab updated data when live. Below is the relevant snippet: import {connect} from "@/dbConnection/dbConnection"; import Post ...

javascriptdatabasemongodbnext.jsbackend

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

javascriptjquerycssjquery-ui

Customize button text in Vue using data variable conditions

There are 3 desks in a table with role IDs 2, 4, and 6. In this scenario, two tables are involved. The goal is to dynamically display a specific role name on a button based on the current user's role ID. The desired displays are: If the current use ...

javascriptvue.jsvuejs2vue-component

The websocket connection established with apollo-server is somehow producing nonsensical output for the connection params

onConnect should receive the connectionParams supplied by the client and then validate that the token has not expired by checking the token property on the connectionParams object. On the client-side, I send these parameters in the following manner: const ...

javascriptnode.jsreactjsgraphqlapollo

How to Modify a File Inside a Compressed File Using JSZip

Is it possible to modify a file within a zipped file using JSZip? I have searched for answers and reviewed the API, but I am unable to find a solution. Any assistance on this matter would be highly appreciated. Thank you in advance! ...

javascriptnode.jsjszip

No matter what I attempt, Ng-options is still failing to work properly

This is my custom selection element: <select ng-options="country.country for country in countries" formControlName="country"></select></label> Below is the TypeScript component code associated with it: import { Component } from ' ...

htmlangulartypescript

What is the minimum size a string must be in order to cause the innerHTML render to be disrupted?

Can anyone tell me what the byte limit is for interrupting the rendering of an innerHTML of a DOM element when using innerHTML = $string or .append()? Is it 1MB, 5MB, 10MB? Does it vary by browser? How can I determine this limit? EDIT (11/11/11): I con ...

htmlajaxinnerhtml

Encountering a CORS issue while attempting to make a GET request to an API in an

Looking to retrieve HTML data from a website using an API. The target URL is: https://www.linkedin.com/ Trying to fetch the HTML page as text from this specific URL. Here's what I attempted: getData() { const api = "https://www.linkedin. ...

javascriptangularapicors

Implementing an onclick function to initiate a MySQL update query

<?php include_once("db.php"); $result=mysql_query("SELECT * FROM stu WHERE receiver='DM4'"); while($row=mysql_fetch_array($result)){ echo "<tr>"; echo "<td>" . $row['ptype'] . "</td>"; echo "<td>" . $row[&apo ...

javascriptphp

The issue with the Bootstrap 5 navbar in an Angular project is that it expands properly but fails to close when

I am currently working on developing a Single Page Application using Angular 12 and Bootstrap 5. As part of this project, I have created a shared navbar component. The issue I am facing is that when the navbar transitions to the hamburger menu button for ...

htmlangulartwitter-bootstrapbootstrap-5

The JSONP error code 414 states that the Request-URI is too large

My attempt to transmit a large amount of data (~50000 bytes) to another server using JSONP is resulting in a 414 (Request-URI Too Large) response because JSONP only allows GET requests. Splitting the data into 2k chunks significantly slows down the entire ...

javascriptjsonjsonp

Using jQuery setTimeout within a forEach loop

Currently, I am fetching an array of messages using 'getJSON method. My intention is to display each message for 3 seconds before moving on to the next one. The process involves loading an HTML file and applying a CSS class to each message. However, m ...

javascriptjqueryjsonforeachsettimeout

Display the Sencha Touch Picker with the previously selected option showing

When using the Sencha Touch Picker component, I noticed that if I select a data and then hide the picker, upon showing it again, only the first record is selected each time. I want the picker to display my last selection when shown again. To achieve this ...

javascriptextjssencha-touch-2picker

How can we use JavaScript to close a dropdown menu when the user clicks outside of it?

I am facing an issue with my code. I want to close the dropdown menu when clicking outside of it or on the items within the dropdown. How can I achieve this? I attempted to use addEventListener('click', myFunction) on `document` but it did not w ...

javascripthtmlcssevent-listener

A Guide to Setting the HTML Lang Attribute on a Specific Page in Next.js

I have a website built with Next.js that consists of several pages. Most of the pages are in English, but there is one page that is in French and does not have an English version. How can I assign the lang attribute to the HTML tag for this specific page ...

javascriptnext.js

The input tag contains an empty Request.Form

My issue lies in using Request.Form to retrieve text from an input field, as the value always ends up being empty. My goal is to extract the text value from the input tag and use it to query my database. I have attempted to write to an ASP TextBox but enco ...

javascriptc#htmlasp.netrequest.form

Assigning numerical ratings to a web-based questionnaire in HTML

In my questionnaire, I have radio buttons and checkboxes that need to be graded. The format of the input elements looks like this: <input type="radio" name="1" value="Yes" onclick="document.getElementById('pls').setAttribute('requi ...

javascriptphphtml

Targeting elements using CSS3 animations

http://codepen.io/janesmith/pen/dqweasd Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful. CSS /* Styling for Content Area */ .content div { width ...

htmlcss