Question

我有一个id为myCarousel的Bootstrap轮播。

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

Answer 1

使用以下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个全局变量，并且还添加了滑动发生后立即发生的slid.bs.carousel事件。我还添加了setCarauselSizeStatic的重载方法来获取height参数并进行设置。我认为其余的jQuery代码中的注释将解释会发生什么。

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

1 个答案: