に示すように、Twitter Bootstrap で 2 番目のカルーセル (ソリューションとすべてを使用し、背景色を変更して) を作成しようとしています:- http://solutions.mckinsey.com/index/
背景の変更部分がどのように処理されているかわかりません。手伝ってくれませんか。
これは、現在のカルーセルで行ったことです:-
<div class="personalized-carousel-module media-module">
<div id="myCarouselforthis" class="carousel slide">
<div class="carousel-inner carousel-inner-at-home">
<div class="item active" id="home-carousel-inner">
<a href="/myfirstlink/index.html">
<div class="some-class"></div>
<span>Title</span>
</a>
</div>
<div class="item">
<a href="/myfirstlink2/index.html">
<div class="some-class2"></div>
<span>Title2</span>
</a>
</div>
<div class="item">
<img src="media/sample-image.jpg" alt="">
</div>
</div>
<a class="arrow arrow-left hidden-phone" href="#myCarouselforthis" data-slide="prev"></a>
<a class="arrow arrow-right hidden-phone" href="#myCarouselforthis" data-slide="next"></a>
</div>
</div>
編集
コードを見ていると、それが を介して行われていることに気付きました<div class="solution-preview" value="primary-two-background">。valuedivの要素がどのように色を変えるのか、誰でも説明できますか?
<ul>
<li>
<div class="solution-preview" value="primary-two-background">
<a href="/Index/solutions/periscope/">
<h2>Periscope</h2>
</a>
<p>
Improves return on sales through better pricing, promotions, assortment, and performance management </p>
</div>
</li>
<li>
<div class="solution-preview" value="primary-five-background">
<a href="/Index/solutions/objective-health/">
<h2>Objective Health</h2>
</a>
<p>
Supports community hospitals and small regional systems to improve their cost performance and strategy </p>
</div>
</li>
今までの仕事
そこで、学習目的で同じサイトの CSS と JS を使用して、次のことを行いました。
<div class="module colored home-solutions primary-two-background">
<div id="myCarouselforsolutions" class="carousel slide">
<div class="carousel-inner carousel-inner-at-home">
<div class="content-container">
<h1 id="num-solutions"></h1>
<h2>SOLUTIONS</h2>
<div id="swipe-container-home-solutions">
<div class="item active" id="solutions-slide-dimensions">
<div class="solution-preview" value="primary-two-background">
<a href="/Index/solutions/periscope/">
<h2>Periscope</h2>
</a>
<p>
Improves return on sales through better pricing, promotions, assortment, and performance management </p>
</div>
</div>
<div class="item" id="solutions-slide-dimensions">
<div class="solution-preview" value="primary-five-background">
<a href="/Index/solutions/objective-health/">
<h2>Objective Health</h2>
</a>
<p> Supports community hospitals and small regional systems to improve their cost performance and strategy</p>
</div>
</div>
</div>
</div>
</div>
<a class="arrow arrow-left hidden-phone" href="#myCarouselforsolutions" data-slide="prev"></a>
<a class="arrow arrow-right hidden-phone" href="#myCarouselforsolutions" data-slide="next"></a>
</div>
</div>
問題は、レイアウトに関しては見栄えが良いことですが、カルーセルのスライダーが機能していないことです...そして、私は理解できません.
解決
それはこのようなものでした：-
だから私はそれを次のようにしました： -
$('#myCarouselforsolutions').carousel({
interval: 3000
});
var slideFrom;
var slideTo;
$('#myCarouselforsolutions').on('slide',function(e){
slideFrom = $(this).find('.active').index();
slideTo = $(e.relatedTarget).index();
if (typeof slideTo == "undefined") {
slideTo = 2;
}
//console.log ("slide To " + slideTo + " and From " + slideFrom);
$('.media-module').removeClass('primary-one-background')
.removeClass('primary-two-background')
.removeClass('primary-three-background')
.removeClass('primary-four-background')
.removeClass('primary-five-background')
.addClass($(solution_list[slideTo]).attr('value'));
});
$("#prev-solution, #next-solution").click(function(e) {
//e.preventDefault();
});
私が達成したいのは、フェードアウト、フェードイン（IE）ではなく、スライドさせることだけです。ありがとう。