How to make the slides in a Bootstrap 4 carousel slide in and out with animation

I'm currently utilizing the bootstrap 4 carousel and have made some customizations to fit my project needs.

The main requirement is:

    • When I click on the next slide, the current next slide should become active and a new next slide should load with an animation that makes it appear as if it's entering from outside the viewport on the right side.
    • The current active slide will move to the previous position, so the previously available slide should animate as if it's exiting the viewport towards the left.
  2. Similar behavior for clicking on the previous button.

Quick Overview:

  • Each next slide should enter and exit from the right side of the viewport.
  • Each previous slide should enter and exit from the left side of the viewport.

Left slide represents: Previous Middle slide represents: Active Right slide represents: Next

Below is the code snippet of the carousel I'm using:

...
javascripthtmljquerycssbootstrap-4

Answer №1

Experimented with a new approach:

Struggled to resize the left and right elements.

$('#more-about-carousel').carousel({
  interval: 60000
});

$('.carousel-item').each(function() {
  var minPerSlide = 3;
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < minPerSlide; i++) {
    next = next.next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

Still working on modifying the layout of the carousel:

#more-about-carousel {
    height: 350px;
}
.carousel-inner {
  height: 96%;
  width: 92%;
  margin: 2% 4%;
}

.carousel-inner .carousel-item {
  height: 100%;
}

.carousel-inner .carousel-item .carousel-card {
  height: 100%;
  width: 100%;
  font-size: 3rem;
  font-weight: 300;
  background: #E5F5FF;
  background: linear-gradient(to top, #E5F5FF, #6e8898);
  transition: 1s;
}

.carousel-control-button {
  display: flex;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  height: 40px;
  width: 40px;
  font-size: 2rem;
  line-height: 30px;
  background-color: #000;
  color: #FFF;
  justify-content: center;
  font-weight: bolder;
  position: absolute;
  z-index: 3;
}

.carousel-control-button:hover {
  background: transparent;
  color: #444;
  cursor: pointer;
  border: 1px solid #000;
}

.carousel-control-prev-button {
  top: 45%;
  left: 50px;
}

.carousel-control-next-button {
  top: 45%;
  right: 50px;
}

@media only screen and (max-width: 768px) {
  .carousel-inner .carousel-item>div {
    display: none;
  }
  .carousel-inner .carousel-item>div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}


/* display 3 */

@media only screen and (min-width: 768px) {
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(33.333%);
  }
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
    transform: translateX(-33.333%);
  }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}

Continuing to refine the design of the carousel:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

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

Using a jQuery AJAX anonymous function to send form data

I'm attempting to send an Input file field using jQuery Ajax, but I keep encountering an anonymous function error in my Chrome inspector console. The issue seems to be related to this line in my script: Here's the code snippet I execute after en ...

jqueryajaxdjangofile-upload

"XMLHttpRequest 206 Partial Content: Understanding the Importance of Partial

I need help with making a partial content request using an XMLHttpRequest object in JavaScript. Currently, I am trying to load a large binary file from the server and want to stream it similar to how HTML5 video is handled. While setting the Range header ...

javascriptajaxxmlhttprequest

Manipulate a JSON object with JavaScript

Struggling to find a solution on my own. In my hidden field, I have some JSON data stored. To retrieve this data, I'm using the following syntax: $(document).ready(function() { var data = $("#result").text(); var j = JSON.parse(data); j.my_item.to ...

javascriptjson

Transferring information from a Nuxt module to a plugin

I have been working on passing data from my module options to a plugin. Here is an example of how I am doing it: module.exports = function (moduleOptions) { const options = { ...this.options.moduleName, ...moduleOptions } this.addPlugin({ ...

javascriptvue.jsnuxt.js

Creating dynamic input fields on button click in AngularJS: Step-by-step guide

Currently, I am working on a project that involves a dropdown menu. Here is a sneak peek: https://i.sstatic.net/ghwr8.jpg In the dropdown menu, users are able to select from various input types such as TextBox, Checkbox, Radio button, and Drop down. Addi ...

javascriptangularjsdynamicinput-type-file

Utilizing Prototype in Node.js Modules

Currently, I am working on a project involving multiple vendor-specific files in node. These files all follow a similar controller pattern, so it would be more efficient for me to extract them and consolidate them into a single common file. If you're ...

javascriptnode.jsprototypecommonjs

What is the process for showcasing a local notification within my application?

Here is the code snippet I am working with: import { LocalNotifications } from '@ionic-native/local-notifications'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scs ...

javascriptangularionic4

There seems to be a glitch in my programming that is preventing it

Can someone please help me troubleshoot this code? I'm unable to figure out what's going wrong. The concept is to take user input, assign it to a variable, and then display a string. However, nothing appears on the screen after entering a name. ...

javascripthtmlcss

Guide on utilizing the sName attribute within JQuery DataTables

When receiving data from the server in JSON format, I am struggling to set the "name" attribute on the columns (cells). Is sName the correct property to use for setting the "name" attribute for every Cell? Below is my Datables code: $('#' + se ...

jquerydatatables

Is there a way to utilize a MongoDB plugin to retrieve results directly as a return value instead of within a callback function?

I came across a MongoDB plugin for Node.js that always utilizes callback functions to return search results. However, I am looking for a way to receive the result directly without using callbacks. The code snippet below does not provide me with the desire ...

javascriptnode.jsmongodb

``There seems to be an issue with implementing the SlideDown feature in JavaScript

I am having an issue with a code where the expected behavior is to slide down a div when a person hovers over text, but it's not working. Can someone please review and identify the cause of this problem? <script type="text/javascript" src="/js/jqu ...

javascriptjquerycss

Issue with jquery .val() function not functioning as expected

I am experimenting with the jQuery .val(value) function to set the value of an attribute using the code snippet below. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">< ...

jquery

What is the best way to send data to a view in Laravel using Ajax?

I am facing an issue with my Ajax function that is supposed to call a Laravel view using the data in $paginatedResults returned from another function. However, it keeps returning error 500. I have confirmed that $paginatedResults has the correct data whe ...

javascriptphpajaxlaravelview

How do I prevent a media query written for small screens from also affecting large screens?

@media only screen and (min-width: 320px), (min-width: 360px), (min-width: 375px), (min-width: 600px){ CSS properties for various screen widths are defined here } ...

cssmedia-queries

Is it possible to utilize retina images with CSS3's :before selector?

Can I adjust the size of an image inserted using :before? For example, if I want to use a high resolution image in the content below - how can I specify the dimensions? .buy_tickets_btn:before{ content: url(../images/buttons/pink_ticket_btn_bg.pn ...

css

I'm having trouble displaying the X's and O's in my tic tac toe JavaScript game. Any suggestions on how to resolve this issue?

After following a couple of online tutorials for the tic tac toe project, I encountered an error in both attempts. The X's and O's were not displaying even though all other features were working fine. Below are my codes for HTML, CSS, and JavaScr ...

javascripthtmlcsstic-tac-toe

Using a Function to Retrieve Styles in React Native for Android

My goal is to dynamically add views based on the data received from JSON. Each event should be represented with a different color: red or blue. The app will insert a view accordingly. class MainPage2 extends Component { constructor () { super() var s ...

javascriptmobilereactjsreact-native

Chaining inheritance through Object.create

Recently, I decided to experiment with Object.create() instead of using new. How can I achieve multiple inheritance in JavaScript, for example classA -> classA's parent -> classA's parent's parent, and so on? For instance: var test = ...

javascriptobjectinheritanceormecmascript-5

Place the object into a vacant area with the help of jQuery Sortable

I am using jQuery Sortable and it's functioning well. However, I have encountered a small issue that I need help with.    I have two blocks where elements from one block can be moved to the other. The problem arises when all the elem ...

javascriptjqueryhtmljquery-ui-sortable

"Troubleshooting an issue with mod_rewrite affecting the functionality of an ajax

The issue arises when the ajax request is not triggered after the URL has been rewritten using mod_rewrite. However, by simply removing the trailing slash from the link, the functionality works as expected. For example: It works with these URLs http:// ...

phpjqueryajax.htaccessmod-rewrite