スライドロード時にアクティブなアイテムのCSSプロパティを変更する方法

Question

私はmyCarouselというIDを持つブートストラップカルーセルを持っています。

カルーセルの固定高さは、javascript関数setCarouselSizeStaticで設定され、画像はCSSの下に中央に配置されます。

私は1つの小さな画像を持っていますが、それはより少ない高さを持っているので、それはトップに浮いています。私はまだ水平に中心を置いている間、写真を底にくっつけたい。

次のスライドがロードされる前に、画像の余白の上端を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) 
}; 

[のexplaination]あなたはカルーセルの固定の高さを持っていないとして

。カルーセルで最大の画像を見つけるためのダイナミックな方法が必要でした。そのために、2つのグローバル変数を宣言し、スライドが発生した直後に発生するslid.bs.carouselイベントを追加します。また、高さパラメータを取得して設定するために、setCarauselSizeStaticのオーバーロードされたメソッドを追加しました。私は上記のjQueryコードのコメントは、残りの部分が何が起こるかを説明すると思います。