How can you alter the animation direction of a Bootstrap carousel slide?

Is it possible to create a reverse animation effect for a bootstrap carousel slide without changing the order of slides?

1 2 3 4

to

4 3 2 1

I just want the slides to appear in reverse order, is that achievable?

The code snippet looks like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  
  <div class="kampany">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="kampanyapic px-0">
                        <div id="kampanyacontrol" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                              <div class="carousel-item active">
                                <img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
                              </div>
                              <div class="carousel-item">
                                <img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
                              </div>
                              <div class="carousel-item">
                                <img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
                              </div>
                            </div>
                            <a class="carousel-control-prev" href="#kampanyacontrol" role="button" data-slide="prev">
                              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                              <span class="sr-only">Previous</span>
                            </a>
                            
                          </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="kampanyainfo px-0">
                        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                                          <div class="carousel-item active">
                                <img class="d-block w-100" src="https://images.unsplash.com/photo-1517994112540-009c47ea476b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="First slide">
                              </div>
                              <div class="carousel-item">
                                <img class="d-block w-100" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Second slide">
                              </div>
                              <div class="carousel-item">
                                <img class="d-block w-100" src="https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Third slide">
                              </div>
                            </div>
                            
                            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                              <span class="carousel-control-next-icon" aria-hidden="true"></span>
                              <span class="sr-only">Next</span>
                            </a>
                          </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   <script>
 $('.kampany .carousel-control-next,.kampany .carousel-control-prev').on('click', function (e) {
          var inst = $(this).data("slide");
          if(inst== "prev"){ 
          $("#carouselExampleControls").carousel("prev")}
          else{ $("#kampanyacontrol").carousel("next")}
        })
</script>

I am looking to mirror the right carousel slide reflecting the left one without changing their directions. The desired outcome is for both carousels to slide synchronously into the same image.

javascripthtmlcssbootstrap-4

Answer №1

I just had a breakthrough!

$('.carousel-sync').carousel('cycle');
$('.carousel-sync').on('click', '.carousel-control-next[data-slide]', function (ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel($(this).data('slide'));
});
$('.carousel-sync').on('click', '.carousel-control-prev[data-slide]', function (ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel($(this).data('slide'));
});


$('.carousel-sync').on('mouseover', function(ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel('pause');
});
$('.carousel-sync').on('mouseleave', function(ev) {
    ev.preventDefault();
    $('.carousel-sync').carousel('cycle');
});
.kampanyainfo .carousel-item-next.carousel-item-left,
.kampanyainfo .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

// CSS code continues...


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    // Additional link tags...
  
  <div class="kampany">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    // HTML code goes here...

This solution worked perfectly for me!

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

Unexpected symbol in JSON parsing with JavaScript

let information; $.ajax({ url: link, type: 'POST', dataType: "json", success: function (data, textStatus) { information = data; alert(data.name); } }); I am attempting to retrieve JSON-encoded data from a spe ...

javascriptjson

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

javascriptjqueryhtmljquery-selectbox

Asp.net isn't cooperating with Jquery Ajax Call

I've tried multiple solutions, but nothing seems to be working. I'm attempting a simple Ajax call using Jquery in Visual Studio 2019, but the code is not hitting the Ajax call. Here's the snippet of my code: <script src="Scripts/jqu ...

javascriptc#jqueryasp.netajax

Pass KeyEventArgs object to JavaScript function

Is it possible to pass keydown events as parameters to a JavaScript function in Silverlight4? ...

javascriptjquerysilverlight-4.0

Sending a PHP error back in response to an Ajax call

My PHP script needs to be called with AJAX, but I keep getting an error message that says "Error:email=my_email&password=myPassword". Check out the PHP script below: <?php session_start(); require "db_config.php"; if ($_SERVER["request_method"] ...

javascriptphpjqueryajax

What is the best way to incorporate additional features into the HTML content that I display using Express?

Currently, I am working on a project using NodeJS and express in order to capture data from a form and save it to a local file on my computer. Since I am developing locally (localhost), the local file is located on my server. While I have successfully rend ...

javascriptnode.jsexpress

Is the see-through sticky header going to overlay the main banner?

I recently completed developing a client's website using Squarespace. Now, I am looking to design a header that: 1) Initially has a transparent background upon the user's arrival on the page 2) Transitions to a solid background color and sticks ...

javascriptjquerycssnavigationsquarespace

Populating an HTML form using a Node.js server

I am looking for a way to automate filling an HTML form's input fields, submitting it, and retrieving the body of the page. After some research, I came across a module called form-scraper. However, when I tried implementing it, I encountered the follo ...

javascriptnode.jsweb-scraping

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: https://i.sstatic.net/BH7Su.png Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap ...

htmlcsstwitter-bootstrap-3flexboxgrid

Eliminate the preset padding on the left and right sides of the container-fluid in Bootstrap 5

How can I remove the default padding-left and padding-right in a container-fluid using Bootstrap 5? I don't want to use "!important" in my CSS file. I have already tried disabling the default padding with Chrome dev tools but it didn't work. Any ...

htmlcsstwitter-bootstrapbootstrap-5

Problem with sidebar animation: Functioning properly when open, but closes abruptly without animation in React using Tailwind CSS

When interacting with my Menu react component by clicking on the 'hamburger' icon that I created manually, the sidebar menu opens smoothly with an animation. However, the issue arises when trying to close the sidebar as it vanishes instantly with ...

javascriptnode.jsreactjsnext.jstailwind-css

Utilize AJAX to insert information into a MySQL database when a checkbox is selected

Before I got stuck here, I took a look at how a similar question was implemented here I attempted to implement the code in order to insert data into a MySQL database when a checkbox is clicked. While it may have been easier to do this on form submission, ...

javascriptphpmysqlajaxonclick

Adding Quasar to Your Nuxt App: A Step-by-Step Guide

I'm looking to incorporate Quasar into my current Nuxt project. As I delved into the Quasar documentation, I noticed that the installation guide only highlights their own CLI tool, which doesn't offer support for Nuxt integration. Additionally, I ...

javascriptvue.jsnuxt.jsquasar-framework

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

htmlcss

How can I use VueJS and Vue Router to generate a details page for a list item?

I am currently working with a list of items sourced from a JSON file and looping through them. However, I want to create individual details pages for each item using VueRouter. Any advice on how I can accomplish this? I am facing difficulties in passing t ...

javascriptjsonvuejs2

Different techniques for retrieving elements generated by ng-repeat from their containing parent

Let's keep it simple - imagine we have a directive called headSlides. This directive's template includes an image that is being repeated using ng-repeat: <img class="bg" ng-repeat="image in images" ng-src="{{image.src}}"> I need to access ...

javascriptjqueryangularjs

When buttons contain an image instead of text, event.target.value will be undefined

I'm facing an issue with two buttons that are almost identical, except one includes an image while the other has text content. I have added onClick event handlers to both of them. Oddly, the event.target.value for the image button is coming up as und ...

javascriptnode.jsreactjs

Mobile-exclusive carousel feature

I am currently working on a project where I need to create a carousel specifically designed for mobile devices. I want the carousel to display only one image at a time on screens with a resolution lower than 650px, while on larger screens, a standard grid ...

htmlcssbootstrap-4

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

javascripthtmlcssreactjstypescript

Can search criteria be saved for later use?

I operate a classifieds website that allows users to search through ads. I am contemplating ways to save search criteria so that users can easily reuse them for future searches without having to input the same details over and over again. For instance, th ...

phpsqlmysqlhtmlsearch