如何获得轮播幻灯片的平滑过渡

Question

我正在单击上一张和下一张幻灯片更改时实现轮播，这是我的代码，它工作正常，唯一的问题是过渡，它不像预期的那么顺利。 我附上了代码的工作副本。 任何人都可以请帮助为什么它不顺利，我错过了什么

谢谢

 let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item'); sessions.forEach((el) => { const minPerSlide = 3 let next = el.nextElementSibling for (var i = 1; i < minPerSlide; i++) { if (!next) { // wrap carousel by using first child next = sessions[0] } let cloneChild = next.cloneNode(true) el.appendChild(cloneChild.children[0]) next = next.nextElementSibling } }) $(document).ready(function () { $('#sessionCarousel').carousel({ interval: false }); $('#sessionCarousel').carousel('pause'); });

 .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1pxsolidrgba(0,0,0,.125); border-radius: .25rem; margin: 10px; } .block-container-component .force-img-background { background-repeat: no-repeat !important; background-position: center !important; background-size: 86% auto !important; } .parent-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .title-anchor { margin-left: 3rem !important; } @media (min-width: 768px) { .parent-container { width: 750px; } } @media (min-width: 992px) { .parent-container { width: 970px; } } @media (min-width: 1200px) { .parent-container { width: 1170px; } } @media (max-width: 767px) { #sessionContainer .carousel-inner .carousel-item>div { display: none; } #sessionContainer .carousel-inner .carousel-item>div:first-child { display: block; } } #sessionContainer .carousel-inner .carousel-item.active, #sessionContainer .carousel-inner .carousel-item-next, #sessionContainer .carousel-inner .carousel-item-prev { display: flex; } /* medium and up screens */ @media (min-width: 768px) { #sessionContainer .carousel-inner .carousel-item-end.active, #sessionContainer .carousel-inner .carousel-item-next { transform: translateX(25%); } #sessionContainer .carousel-inner .carousel-item-start.active, #sessionContainer .carousel-inner .carousel-item-prev { transform: translateX(-25%); } #sessionContainer .card img { width: 98%; } #sessionContainer .carousel-item { justify-content: space-between; } } @media (max-width: 767px) { #sessionContainer .card img { width: 100%; } #sessionContainer .overlay { width: 100%; /* height: 75vh; */ } #sessionContainer .carousel-inner .carousel-item.active, #sessionContainer .carousel-inner .carousel-item-next, #sessionContainer .carousel-inner .carousel-item-prev { display: block; } } .carousel-control-next, .carousel-control-prev { width: 22%; } #sessionContainer .carousel-inner .carousel-item-end, #sessionContainer .carousel-inner .carousel-item-start { transform: translateX(0); } #sessionContainer .card { border: 0; } #sessionContainer .card { position: relative; border-radius: 1.5rem !important; } #sessionContainer .card .card-img-overlays { position: absolute; bottom: 15%; left: 10%; color: #fff; font-weight: bolder; } #sessionContainer a { text-decoration: none; } #sessionContainer .indicator { border: 1px solid rgb(202, 202, 202); padding: 3px 6px 3px 6px; } #sessionContainer .indicator:hover { background-color: blue; border: 1px solid blue; transition: 200ms; } #sessionContainer .indicator:hover { color: white; transition: 200ms; } #sessionContainer .indicator { color: lightgray; } #sessionContainer .float-end { padding-top: 10px; } #sessionContainer .card-body { background: #041E42; color: white; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; padding: 1.5rem 2rem !important; } #sessionContainer .card-img-top { position: relative; } .card .main-img { position: relative !important; } .card:hover .bot-text { display: block !important; } .card:hover .sub-text { display: block !important; } .carousel-caption { color: #1f1818 !important; text-align: left; position: absolute; right: 15%; left: 18%; top: 36%; } .top-right { position: absolute; right: 5%; top: 7%; } .btn-know { background: white !important; color: black; border-radius: 20px !important; font-size: 1.2rem !important; font-weight: 700 !important; padding: .6rem 2rem !important; margin-top: 3rem !important; } .line { height: 6px; width: 100%; background: #2ade32; position: absolute; bottom: 0; left: 2%; }

 <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <div class="block-container parbase section"> <div class="block-container-component full-width classic theme-blue"> <div class="mt-5 force-img-background" style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%) data-overlay="0"> <div class="block-container margin-bottom-0"> <div class="block-container-list top-bot-no-inside-padding left-right-"> <div class="title section"> <div class="custom-targeting-buttons "></div> <h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session takeaway infographics</h3> </div> <div class="html-component-2.0 section"> <!-- Raw HTML --> <div class="rte-styles margin-bottom-50"> <div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;"> <div class="row mx-auto my-auto justify-content-center"> <div class="col-1"> <a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button" data-bs-slide="prev">PREVIOUS <img src="" alt=""> </a> </div> <div class="col-10"> <div id="sessionCarousel" class="carousel slide transform"> <div class="carousel-inner mx-auto row w-100" role="listbox"> <div class="carousel-item active"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe1</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe2</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe3</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe4</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe5</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe6</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> </div> </div> </div> <div class="col-1"> <a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button" data-bs-slide="next">NEXT <img src="" alt=""> </a> </div> </div> </div> </div> <!-- HTML Form --> </div> <div class="button-2-0 section"> <div class="custom-targeting-buttons "></div> <div class="button-component-wrapper button-glms-alignment left margin-bottom-10"> <a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content" href="" role="button"> <span> <i class=" button-icon-alignment-left button-icon-content2 btn"></i> Click here for more </span> </a> </div> </div> </div> </div> </div> </div> </div>

Answer 1

只需添加 carousel-fade 并直接编辑 bootstrap5 css3 以获得所需的效果，例如在我添加的代码中

查看我的视频，在我的自定义 bootstrap5 博客主题上解释这一点https://youtu.be/SZkv2ipRico

      .carousel-item {
    transition-duration: 1.5s;
  }


.transform {
    transition: 5s ease-out 5s ease-in 1s ease-in-out;
    opacity: 90%;
}

.carouse-fade{
    transition-duration:  1.5s;
    opacity: 50%;
}

并添加了 carousel-fade 就像我之前在

      <div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel">

 <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <style> .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1pxsolidrgba(0,0,0,.125); border-radius: .25rem; margin: 10px; } .block-container-component .force-img-background { background-repeat: no-repeat !important; background-position: center !important; background-size: 86% auto !important; } .parent-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .title-anchor { margin-left: 3rem !important; } @media (min-width: 768px) { .parent-container { width: 750px; } } @media (min-width: 992px) { .parent-container { width: 970px; } } @media (min-width: 1200px) { .parent-container { width: 1170px; } } @media (max-width: 767px) { #sessionContainer .carousel-inner .carousel-item>div { display: none; } #sessionContainer .carousel-inner .carousel-item>div:first-child { display: block; } } #sessionContainer .carousel-inner .carousel-item.active, #sessionContainer .carousel-inner .carousel-item-next, #sessionContainer .carousel-inner .carousel-item-prev { display: flex; } /* medium and up screens */ @media (min-width: 768px) { #sessionContainer .carousel-inner .carousel-item-end.active, #sessionContainer .carousel-inner .carousel-item-next { transform: translateX(25%); } #sessionContainer .carousel-inner .carousel-item-start.active, #sessionContainer .carousel-inner .carousel-item-prev { transform: translateX(-25%); } #sessionContainer .card img { width: 98%; } #sessionContainer .carousel-item { justify-content: space-between; } } @media (max-width: 767px) { #sessionContainer .card img { width: 100%; } #sessionContainer .overlay { width: 100%; /* height: 75vh; */ } #sessionContainer .carousel-inner .carousel-item.active, #sessionContainer .carousel-inner .carousel-item-next, #sessionContainer .carousel-inner .carousel-item-prev { display: block; } } .carousel-control-next, .carousel-control-prev { width: 22%; } #sessionContainer .carousel-inner .carousel-item-end, #sessionContainer .carousel-inner .carousel-item-start { transform: translateX(0); } #sessionContainer .card { border: 0; } #sessionContainer .card { position: relative; border-radius: 1.5rem !important; } #sessionContainer .card .card-img-overlays { position: absolute; bottom: 15%; left: 10%; color: #fff; font-weight: bolder; } #sessionContainer a { text-decoration: none; } #sessionContainer .indicator { border: 1px solid rgb(202, 202, 202); padding: 3px 6px 3px 6px; } #sessionContainer .indicator:hover { background-color: blue; border: 1px solid blue; transition: 200ms; } #sessionContainer .indicator:hover { color: white; transition: 200ms; } #sessionContainer .indicator { color: lightgray; } #sessionContainer .float-end { padding-top: 10px; } #sessionContainer .card-body { background: #041E42; color: white; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; padding: 1.5rem 2rem !important; } #sessionContainer .card-img-top { position: relative; } .card .main-img { position: relative !important; } .card:hover .bot-text { display: block !important; } .card:hover .sub-text { display: block !important; } .carousel-caption { color: #1f1818 !important; text-align: left; position: absolute; right: 15%; left: 18%; top: 36%; } .top-right { position: absolute; right: 5%; top: 7%; } .btn-know { background: white !important; color: black; border-radius: 20px !important; font-size: 1.2rem !important; font-weight: 700 !important; padding: .6rem 2rem !important; margin-top: 3rem !important; } .line { height: 6px; width: 100%; background: #2ade32; position: absolute; bottom: 0; left: 2%; } .carousel-item { transition-duration: 1.5s; } .transform { transition: 5s ease-out 5s ease-in 1s ease-in-out; opacity: 90%; } .carouse-fade{ transition-duration: 1.5s; opacity: 50%; } </style> <div class="block-container parbase section"> <div class="block-container-component full-width classic theme-blue"> <div class="mt-5 force-img-background" style="background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%) data-overlay="0"> <div class="block-container margin-bottom-0"> <div class="block-container-list top-bot-no-inside-padding left-right-"> <div class="title section"> <div class="custom-targeting-buttons "></div> <h3 class="title-anchor left bogle-bold margin-bottom-20" data-component="title">Session takeaway infographics</h3> </div> <div class="html-component-2.0 section"> <!-- Raw HTML --> <div class="rte-styles margin-bottom-50"> <div class="container-fluid" id="sessionContainer" style="margin:50px auto;position: relative;"> <div class="row mx-auto my-auto justify-content-center"> <div class="col-1"> <a style="color: black" class="carousel-control-prev bg-transparent w-aut" href="#sessionCarousel" role="button" data-bs-slide="prev">PREVIOUS <img src="" alt=""> </a> </div> <div class="col-10"> <div id="sessionCarousel" class="carousel slide transform carousel-fade" data-bs-ride="carousel"> <div class="carousel-inner mx-auto row w-100" role="listbox"> <div class="carousel-item active"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe1</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe2</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe3</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe4</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe5</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card"> <div class="card-img-top"> <div class="line"></div> <img src="https://picsum.photos/200" alt="Card image" style="width:100%"> </div> <div class="card-body"> <h6 class="card-title">John Doe6</h6> <p class="card-text">Some example text some example text. </p> <a href="#" class="btn btn-know">Know more</a> </div> </div> </div> </div> </div> </div> </div> <div class="col-1"> <a style="color: black" class="carousel-control-next bg-transparent w-aut" href="#sessionCarousel" role="button" data-bs-slide="next">NEXT <img src="" alt=""> </a> </div> </div> </div> </div> <!-- HTML Form --> </div> <div class="button-2-0 section"> <div class="custom-targeting-buttons "></div> <div class="button-component-wrapper button-glms-alignment left margin-bottom-10"> <a class="button-glms-button button-primary button-ozark-noir btn-regular button-icon-alignment-left button-content" href="" role="button"> <span> <i class=" button-icon-alignment-left button-icon-content2 btn"></i> Click here for more </span> </a> </div> </div> </div> </div> </div> </div> </div> <script> let sessions = document.querySelectorAll('#sessionContainer .carousel .carousel-item'); sessions.forEach((el) => { const minPerSlide = 3 let next = el.nextElementSibling for (var i = 1; i < minPerSlide; i++) { if (!next) { // wrap carousel by using first child next = sessions[0] } let cloneChild = next.cloneNode(true) el.appendChild(cloneChild.children[0]) next = next.nextElementSibling } }) $(document).ready(function () { $('#sessionCarousel').carousel({ interval: false }); $('#sessionCarousel').carousel('pause'); }) </script>