如何在幻灯片加载时更改活动项的CSS属性

How to change CSS properties of an active item when slide loads

本文关键字：活动 CSS 属性 幻灯片 加载      更新时间：2023-09-26

我有一个id为myCarousel的Bootstrap carousel。

Carousel使用javascript函数setCarouselSizeStatic设置固定高度，并使用下面的CSS将图像居中。

我有一个较小的图片，它的高度要低得多，因此它浮在顶部。我想让图片贴在底部，同时保持水平居中

我希望在加载下一张幻灯片之前将图片的边距顶部更改为等于CarauselHeight - imgeHeight.

我的问题是如何做到这一点?

下面是HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="Image" src="http://somewhere.image1.jpg" alt="Image from google">
      <div class="carousel-caption">
          <h3>Title</h3>
          <p>Description</p>
      </div>
    </div>

    <div class="item">
      <img class="Image" src="http://somewhere.image2.jpg" alt="Image from google">
      <div class="carousel-caption">
          <h3>Title</h3>
          <p>Description</p>
      </div>
    </div>
    <div class="item">
      <img class="Image" src="http://somewhere.image3.jpg" alt="Image from google">
      <div class="carousel-caption">
        <h3>Title</h3>
        <p>Description</p>
      </div>
    </div>
  </div>

图片居中的CSS:

.carousel-inner > .item> img {
    margin: 0 Auto;
}

这是我的javascript:

$( document ).ready(function() {
     $('#myCarousel').carousel();
     setCarauselSizeStatic();
});
//The purpose of this function is to make the carousel the same size 
//for other images than the first without breaking responsivness
//as my first image is the biggest it all makes sense

$('#myCarousel').on('slide.bs.carousel', function () {
  //get the width of the image loaded
  var imageHeight = $('.active').height();
  //get the width of the carausel
  var carHeight = $('#myCarousel').height();
  //calculate the margin
  var margin = carHeight - imageHeight;
  //make the top margin of the item equal to CarouselHeight - imageHeight
  $(".active").css("margin", margin );
});
function setCarauselSizeStatic() {
  $("#myCarousel").css("height", $('#myCarousel').height()
  )};

使用以下jQuery代码进行修复:

$( document ).ready(function() {
 $('#myCarousel').carousel();
 setCarauselSizeStatic();
});
//declare 2 global variables.
var currentSlideHeight;
var maxSlideHeight;
$('#myCarousel').on('slide.bs.carousel', function (e) {
//set the heigth of the previous image loaded for next slide
currentSlideHeight = $('#myCarousel').height();
});
$('#myCarousel').on('slid.bs.carousel', function (e) {
//set the heigth of the current image loaded and presume its the max height image 
maxSlideHeight = $('#myCarousel').height();
// check if the maxSlideHeight is really the maximum.
if(maxSlideHeight < currentSlideHeight)
{
  // set new max slide height
  maxSlideHeight = currentSlideHeight;
  //set the carousel inner box height to the max height found till now
  setCarauselSizeStatic(maxSlideHeight);
  //for the margin adjust to show lower height images at the bottom of the carousel
  //calculate the margin of the margin difference by subtracting the lower height image value from carousel height
  var margin = maxSlideHeight - $('.active .Image').height();
  // get the current active item margin-top value
  var currentMargin = $(".active").css("margin-top");
  // check if the margin adjust not already applied to avoid re running code again and again.
  if(currentMargin != margin)
    {
        //set the margin-top of the item to the adjustment calculated
        $(".active").css("margin-top", margin );  
    }
 }
});
//The purpose of this function is to make the carousel the same size  
function setCarauselSizeStatic() {
   $(".carousel-inner").css("height", $('#myCarousel').height())
};
function setCarauselSizeStatic(customheight) {
   $(".carousel-inner").css("height", customheight)
};
(解释)

因为你没有固定高度的旋转木马。你需要一种动态的方式来找到旋转木马中最大的图像。为此，我们声明了2个全局变量，并添加了slide。bs。carousel事件，该事件在幻灯片发生后立即发生。我还添加了一个重载方法setcarauselsizeststatic来获取高度参数并设置它。我认为上述jQuery代码中的其余注释将解释发生了什么。

相关文章：