在 bootstrap 4 carousel 中为上一张和下一张幻灯片制作动画

Question

I'm using bootstrap 4 carousel and I have customized it for project.

My basic requirement is

1. • When i click next slide then current next slide becomes active and new next slide is loaded which should be animated like it is coming from outside of viewport right.
   • Current active slide will become previous so previously available slide should animate like going outside of viewport left.
2. Same for previous click.

Quick Overview:

• Every next slide should come and go from right side of viewport
• Every previous slide should come and go from left side of viewport

left slide is: previous middle slide is: active right slide is: next

Here is the my carousel code snippet: I have used Jquery 3.5.1 and Bootstrap 4.6

 $moreAboutSlideCount = $('.carousel-card').length; if ($moreAboutSlideCount > 2) { $('#more-about-carousel.carousel-inner').children().removeClass('prev active next'); if ($moreAboutSlideCount % 2 == 0) { $('.carousel-card:nth-child(' + ($moreAboutSlideCount / 2) + ')').addClass('active'); $('.carousel-card:nth-child(' + ($moreAboutSlideCount / 2) + ')').prev().addClass('prev'); $('.carousel-card:nth-child(' + ($moreAboutSlideCount / 2) + ')').next().addClass('next'); } else { $('.carousel-card:nth-child(' + (($moreAboutSlideCount + 1) / 2) + ')').addClass('active'); $('.carousel-card:nth-child(' + (($moreAboutSlideCount + 1) / 2) + ')').prev().addClass('prev'); $('.carousel-card:nth-child(' + (($moreAboutSlideCount + 1) / 2) + ')').next().addClass('next'); } $('.carousel-card').click(function() { const moreAboutSlider = document.querySelector('#more-about-carousel.carousel-inner'); if (moreAboutSlider.lastElementChild === this) { $(this).parent().append($(this).siblings().first()); } if (moreAboutSlider.firstElementChild === this) { $(this).parent().prepend($(this).siblings().last()); } $(this).removeClass('prev next'); $(this).siblings().removeClass('prev active next'); $(this).addClass('active'); $(this).prev().addClass('prev'); $(this).next().addClass('next'); }); }

 #more-about-carousel { height: 350px; } #more-about-carousel.carousel-inner { height: 96%; width: 92%; margin: 2% 4%; align-items: center; justify-content: center; } #more-about-carousel.carousel-card { height: 100%; width: 100%; position: absolute; z-index: 1; -webkit-transform: scale(0.6) translateY(-2rem); transform: scale(0.6) translateY(-2rem); opacity: 0; cursor: pointer; pointer-events: none; background: #2e5266; background: linear-gradient(to top, #2e5266, #6e8898); transition: 1s; } #more-about-carousel.carousel-card:after { position: absolute; height: 2px; width: 100%; border-radius: 100%; background-color: rgba(73, 73, 73, 0.3); bottom: -5rem; -webkit-filter: blur(4px); filter: blur(4px); } #more-about-carousel.carousel-card:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 3rem; font-weight: 300; color: rgb(180, 56, 56); } #more-about-carousel.carousel-card.active { z-index: 3; left: 33.3333333%; top: 0; -webkit-transform: scale(1) translateY(0) translateX(0); transform: scale(1) translateY(0) translateX(0); opacity: 1; pointer-events: auto; transition: 1s; cursor: default; position: absolute; } #more-about-carousel.carousel-card.prev, #more-about-carousel.carousel-card.next { z-index: 2; -webkit-transform: scale(0.8) translateY(-1rem) translateX(0); transform: scale(0.8) translateY(-1rem) translateX(0); opacity: 0.6; pointer-events: auto; transition: 1s; display: flex; position: absolute; } #more-about-carousel.carousel-card.prev { left: 0; } #more-about-carousel.carousel-card.next { left: 66.66666666%; }

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="bg-light pb-5"> <div class="m-0 p-5"> <div class="about-carousel"> <div id="more-about-carousel" class="carousel slide" data-ride="carousel" data-interval="60000"> <div class="carousel-inner row"> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">One</h5> <h6 class="card-subtitle">1</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 1</p> </div> </div> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">Two</h5> <h6 class="card-subtitle">2</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 2</p> </div> </div> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">Three</h5> <h6 class="card-subtitle">3</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 3</p> </div> </div> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">Four</h5> <h6 class="card-subtitle">4</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 4</p> </div> </div> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">Five</h5> <h6 class="card-subtitle">5</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 5</p> </div> </div> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">Six</h5> <h6 class="card-subtitle">6</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 6</p> </div> </div> <div class="carousel-item col-12 col-md-4 card carousel-card text-center"> <h5 class="card-title">Seven</h5> <h6 class="card-subtitle">7</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 7</p> </div> </div> </div> </div> </div> </div> </div>

Note: Script Error is showing here only, not in my local machine.

Answer 1

Tried something different:

But not able to scale down 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)); } });

 #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); }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.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@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <div class="bg-light w-100 pb-5"> <div class="m-0 p-5 text-center"> <div class="row mx-auto my-auto"> <div id="more-about-carousel" class="carousel slide w-100" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <div class="col-md-4"> <div class="card carousel-card"> <h5 class="card-title">One</h5> <h6 class="card-subtitle">1</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 1</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card carousel-card"> <h5 class="card-title">Two</h5> <h6 class="card-subtitle">2</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 2</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card carousel-card"> <h5 class="card-title">Three</h5> <h6 class="card-subtitle">3</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 3</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card carousel-card"> <h5 class="card-title">Four</h5> <h6 class="card-subtitle">4</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 4</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card carousel-card"> <h5 class="card-title">Five</h5> <h6 class="card-subtitle">5</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 5</p> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card carousel-card"> <h5 class="card-title">Six</h5> <h6 class="card-subtitle">6</h6> <div class="card-body p-0"> <p class="card-text text-center text-monospace">Card - 6</p> </div> </div> </div> </div> </div> <a class="carousel-control-button carousel-control-prev-button" href="#more-about-carousel" role="button" data-slide="prev"> &lsaquo; </a> <a class="carousel-control-button carousel-control-next-button" href="#more-about-carousel" role="button" data-slide="next"> &rsaquo; </a> </div> </div> </div> </div>