css 如何在Bootstrap 5 carousel中为图像添加淡入淡出过渡？

我目前使用的是Bootstrap 5 carousel，我想添加一个过渡，当你点击“下一个”箭头时，carousel会慢慢淡出，然后随着下一个图像的显示而淡入。我想这样做是因为我的carousel中的图像大小不同，所以当你点击“下一个”时，它只会快速剪切carousel，看起来不太好。
这是我目前拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="testing.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
    <script defer src="testing.js"></script>
</head>
<body style="max-width: 100%; overflow-x:hidden; background-color:black;">
    <div class="container-lg">
        <div class="row justify-content-center text-center align-items-center">                      
            <div class="col-4">
                <div id="myCarousel" class="carousel slide carousel-fade">
                    <div class="carousel-inner">
                        <div class="carousel-item active img-fluid">
                            <img src = "image1.jpg" class = "img-fluid">
                        </div>
                        <div class="carousel-item img-fluid">
                            <img src = "image2.jpg" class = "img-fluid">
                        </div>
                    </div>                 
                </div>
                <button class="carousel-control-prev" onclick="nextSlide()" type="button" data-bs-target="#myCarousel" 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" onclick="nextSlide()" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

字符串
这是我的CSS --

.carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.fadeIn {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}
.fadeOut {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}

型
最后是我的JS -

function nextSlide() {
    const carousel = document.getElementById('myCarousel');
    const activeItem = carousel.querySelector('.carousel-item.active');
    const nextItem = activeItem.nextElementSibling || carousel.querySelector('.carousel-item:first-child');
    setTimeout(() => {
      activeItem.classList.remove('active');
      activeItem.classList.add("fadeOut");
      activeItem.classList.remove("fadeIn");
      nextItem.classList.add('active');
      nextItem.classList.remove("fadeOut");
      nextItem.classList.add("fadeIn")
    }, 3000);
}

型

默认情况下，bootstrap 5使用carousel-fade在幻灯片上提供淡入/淡出，如下面的实时演示所示。
但是如果你想在你的代码中添加额外的淡入/淡出功能，你就不会使用bs 5 carousel提供的内置事件。
您需要使用通过bs 5 carousel js事件传递的值。
请参见此处的文档. https://getbootstrap.com/docs/5.3/components/carousel/#events
查看来自转盘的控制台记录的事件.

const myCarousel = document.getElementById('myCarousel');

myCarousel.addEventListener('slide.bs.carousel', event => {

  console.clear();

  console.log(event.direction, event.relatedTarget, event.from, event.to);

});

个字符

仅CSS解决方案更新...

在重读了你的问题之后，我想我现在更好地理解了你的问题。
您只需在下一张或上一张幻灯片淡入之前，让每个.carousel-item完全淡出即可。
您可以通过对transition属性的几个css重写来控制opacity过渡效果的持续时间和延迟来实现这一点。
请参阅下面关于Bootstrap 5.3 carousel的css仅覆盖示例.

#myCarousel .active.carousel-item-end, 
#myCarousel .active.carousel-item-start {
  transition-duration: 600ms;
  transition-delay: 0ms;
}

#myCarousel .carousel-item-next, 
#myCarousel .carousel-item-prev {
  transition-duration: 600ms;
  transition-delay: 600ms;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="1200" data-bs-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://placehold.co/2560x720?text=Slide1" class="img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/2560x720?text=Slide2" class="img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/2560x720?text=Slide3" class="img-fluid">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" 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/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

的字符串
您会注意到在#myCarousel div中，我定义了这些数据属性... data-bs-ride="carousel" data-bs-interval="1200" data-bs-pause="hover"。
我把data-bs-interval="1200"设置为1.2秒，这是使用下面的css覆盖的绝对最小间隔时间，所以幻灯片在淡入淡出过渡时不会重叠。如果你使用data-bs-ride="carousel"，你只需要使用data-bs-interval。
请参阅下面css中的注解，以便您了解这些转换属性中发生的情况。

/* 0 second trans delay, .6 second trans duration on opacity fade out. */
#myCarousel .active.carousel-item-end, 
#myCarousel .active.carousel-item-start {
  transition-duration: 600ms;
  transition-delay: 0ms;
}

/* .6 second trans delay, .6 second trans duration on opacity fade in. */
#myCarousel .carousel-item-next, 
#myCarousel .carousel-item-prev {
  transition-duration: 600ms;
  transition-delay: 600ms;
}

/* 1.2 seconds (1200 milliseconds) in total of transition delay and duration in my css above.
If you modify this you need to adjust your data-bs-interval time if your running auto data-bs-ride. */

型
由于淡入/淡出过渡时间的总时间为1200 ms，因此您需要将data-bs-interval="1200"设置为最小值，以便.carousel-item不会重叠。
如果你想在使用data-bs-ride="carousel"时在每次自动转换之间自定义间隔时间。你需要将+你的自定义间隔时间添加到我的data-bs-interval="1200"时间。所以如果你想要3秒的间隔时间，你需要将3000添加到1200，看起来像这样... data-bs-interval="4200"。
见下面的例子，间隔3秒（不包括css转换总时间1.2秒）。

#myCarousel .active.carousel-item-end, 
#myCarousel .active.carousel-item-start {
  transition-duration: 600ms;
  transition-delay: 0ms;
}

#myCarousel .carousel-item-next, 
#myCarousel .carousel-item-prev {
  transition-duration: 600ms;
  transition-delay: 600ms;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4200" data-bs-pause="hover">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://placehold.co/2560x720?text=Slide1" class="img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/2560x720?text=Slide2" class="img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/2560x720?text=Slide3" class="img-fluid">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" 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/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

的字符串
这里也是jsfiddle版本. https://jsfiddle.net/joshmoto/nqkxwcye/

css 如何在Bootstrap 5 carousel中为图像添加淡入淡出过渡？

1条答案

相关问题

热门标签

最新问答