如何在 bootstrap carousel 上获取容器 div 以平滑调整大小而不是“跳转”到新大小

问题描述 投票：0回答：1
  1. 当您在引导轮播中浏览各种大小/高度的图像或视频资源时，我试图让容器 div 平滑地调整大小。

现在它“跳跃”调整到下一个图像尺寸高度，这看起来不太好，而且有点卡顿。

我似乎无法让它工作。我尝试过使用％大小调整，使用vh vw，我还认为有一个名为“transiton/ease”的操作可能会有所帮助，但到目前为止我无法弄清楚这一点。任何帮助表示赞赏。

  1. 当图像/视频更宽时，内容调整大小似乎大部分都可以。但如果图像/视频资源很高，是否也可以调整比例大小，或者您必须选择其中之一？如果浏览器变短，高图像现在就会被切断，但如果较短的浏览器使资产仍然缩小（而不被切断），那就太好了

当前代码：

$(document).ready(function() {
  function adjustContainerSize() {
    $('.responsive-container').each(function() {
      var maxWidth = $(this).parent().width();
      var maxHeight = $(window).height() * 0.9; // 90% of viewport height
      $(this).css({
        'max-width': maxWidth,
        'max-height': maxHeight
      });
    });
  }

  adjustContainerSize();

  $(window).resize(function() {
    adjustContainerSize();
  });
});
body {
  background-color: violet;
  margin: 0;
  /* Reset margin to 0 */
  padding: 0;
  /* Reset padding to 0 */
}

.container {
  background-color: green;
  margin-bottom: 50px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slideshow-container {
  position: relative;
  width: 100%;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: #b9dbe5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item {
  text-align: center;
  /* Center images horizontally */
}

.slideshow-container img,
.slideshow-container iframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* Show arrows only on hover */

.slideshow-container:hover .prev,
.slideshow-container:hover .next {
  display: block;
}

.prev,
.next {
  display: none;
  cursor: default;
  /* Change cursor to default */
  z-index: 1000;
  color: silver;
  font-weight: bold;
  font-size: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
  /* Remove underline */
}

.prev:hover,
.next:hover {
  text-decoration: none;
  /* Remove underline */
  color: silver;
  /* Change color on hover */
}

.prev {
  left: 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev.disabled,
.next.disabled {
  pointer-events: none;
  opacity: 0.5;
}


/* Responsive YouTube Video */

.video-container {
  position: relative;
  width: 90%;
  /* Adjust the width as needed */
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio (iframe video) */
  overflow: hidden;
  margin: auto;
  /* Center the video */
  background-color: #b1e1af;
  /* light green */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Responsive container dimensions */

.responsive-container {
  max-width: 90vw;
  max-height: 90vh;
}


/* Media queries for different viewport sizes */

@media (min-width: 768px) {
  .responsive-container {
    max-width: 750px;
    max-height: 600px;
  }
}

@media (min-width: 992px) {
  .responsive-container {
    max-width: 970px;
    max-height: 700px;
  }
}

@media (min-width: 1200px) {
  .responsive-container {
    max-width: 1170px;
    max-height: 800px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div id="myCarousel1" class="slideshow-container carousel slide responsive-container" data-ride="carousel" data-interval="false">
    <!-- Image Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1000x600/?cat">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x600/?dog">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x600/?shark" style="max-width: 100%; max-height: 700px;">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?tree" alt="Tree Image">
      </div>
      <!-- Video Slide -->
      <div class="carousel-item">
        <div class="video-container">
          <iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel1" data-slide="prev">&#10094;</a>
    <a class="next" href="#myCarousel1" data-slide="next">&#10095;</a>
  </div>
</div>

<div class="container">
  <div id="myCarousel2" class="slideshow-container carousel slide responsive-container" data-ride="carousel" data-interval="800">
    <!-- Image Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1000x600/?forest" alt="Forest Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?mountain" alt="Mountain Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?animal" alt="Animal Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?building" alt="Building Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?car" alt="Car Image">
      </div>
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel2" data-slide="prev">&#10094;</a>
    <a class="next" href="#myCarousel2" data-slide="next">&#10095;</a>
  </div>
</div>

<div class="container">
  <div id="myCarousel3" class="slideshow-container carousel slide responsive-container" data-ride="carousel" data-interval="false">
    <!-- Image Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1000x600/?sunset" alt="Sunset Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?sky" alt="Sky Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?cloud" alt="Cloud Image">
      </div>
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/900x600/?moon" alt="Moon Image">
      </div>
      <!-- Video Slide -->
      <div class="carousel-item">
        <div class="video-container">
          <iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>

    <!-- Navigation Arrows -->
    <a class="prev" href="#myCarousel3" data-slide="prev">&#10094;</a>
    <a class="next" href="#myCarousel3" data-slide="next">&#10095;</a>
  </div>
</div>

<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

css carousel bootstrap-5 slideshow
1个回答
0
投票

您面临的问题是由于当活动项目发生变化时，轮播的高度会立即发生变化。这会导致您看到的“跳跃”效果。您可以使用 CSS 过渡来使其更加平滑。

HTML/CSS：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Responsive Slideshows</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
  background-color: violet;
  margin: 0; /* Reset margin to 0 */
  padding: 0; /* Reset padding to 0 */
}
.container {
  background-color: green;
  margin-bottom: 50px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slideshow-container {
  position: relative;
  width: 100%;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background-color: #b9dbe5;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: max-height 0.5s ease; /* Smooth transition for height */
}
.carousel-item {
  text-align: center; /* Center images horizontally */
}
.slideshow-container img,
.slideshow-container iframe {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Show arrows only on hover */
.slideshow-container:hover .prev,
.slideshow-container:hover .next {
  display: block;
}
.prev, .next {
  display: none;
  cursor: pointer; /* Change cursor to pointer */
  z-index: 1000;
  color: silver;
  font-weight: bold;
  font-size: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 16px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none; /* Remove underline */
}
.prev:hover, .next:hover {
  text-decoration: none; /* Remove underline */
  color: silver; /* Change color on hover */
}
.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}
.next {
  right: 0;
}
.prev.disabled, .next.disabled {
  pointer-events: none;
  opacity: 0.5;
}
/* Responsive YouTube Video */
.video-container {
  position: relative;
  width: 90%; /* Adjust the width as needed */
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio (iframe video) */
  overflow: hidden;
  margin: auto; /* Center the video */
  background-color: #b1e1af; /* light green */
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Responsive container dimensions */
.responsive-container {
  max-width: 90vw;
  max-height: 90vh;
}
/* Media queries for different viewport sizes */
@media (min-width: 768px) {
  .responsive-container {
    max-width: 750px;
    max-height: 600px;
  }
}
@media (min-width: 992px) {
  .responsive-container {
    max-width: 970px;
    max-height: 700px;
  }
}
@media (min-width: 1200px) {
  .responsive-container {
    max-width: 1170px;
    max-height: 800px;
  }
}
</style>
</head>
<body>
<div id="myCarousel1" class="slideshow-container carousel slide responsive-container" data-ride="carousel" data-interval="false">
  <!-- Image Slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://source.unsplash.com/random/1000x600/?cat">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/1000x600/?dog">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/1000x600/?shark" style="max-width: 100%; max-height: 700px;">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random/900x600/?tree" alt="Tree Image">
    </div>
    <!-- Video Slide -->
    <div class="carousel-item">
      <div class="video-container">
        <iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>
  <!-- Navigation Arrows -->
  <a class="prev" href="#myCarousel1" data-slide="prev">❮</a>
  <a class="next" href="#myCarousel1" data-slide="next">❯</a>
</div>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- JavaScript for responsive container -->
<script>
$(document).ready(function(){
  function adjustContainerSize() {
    $('.responsive-container').each(function() {
      var maxWidth = $(this).parent().width();
      var maxHeight = $(window).height() * 0.9; // 90% of viewport height
      $(this).css({'max-width': maxWidth, 'max-height': maxHeight});
    });
  }
  adjustContainerSize();
  $(window).resize(function() {
    adjustContainerSize();
  });
});
</script>
</body>
</html>

我在 

.slideshow-container
类中添加了一个过渡属性，以实现平滑的调整大小效果。当导航箭头显示为有点哎哟时，我还将光标更改为指针，以使视觉体验更好一点。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.