使用一个稍微修改过的引导程序转盘,我需要能够将祖父母div(在本例中为.row
类)检测到.row-light
和.row-dark
,它可以不同于默认的.row-default
(具有透明背景)。我可以从各个类中获取浅色和深色,但我需要能够检测背景色是否设置为透明,并且如果祖父母设置为透明则将控件类设置为白色或#fff
。这将允许控件位于转盘幻灯片的边缘。
HTML
<div class="row row-dark">
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="quote-carousel">
<div class="carousel-inner">
<h6>What customers say about us</h6>
<div class="item active">
<ul class="thumbnails">
<li class="col-xs-12 col-sm-12 slide-content">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3>
<span class="time">-Robyn Estroff</span>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="col-xs-12 col-sm-12 slide-content">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3>
<span class="time">-Robyn Estroff</span>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="col-xs-12 col-sm-12 slide-content">
<h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do tempor incididunt ut labore et dolore magna aliqua, ipsum dolor amet."</h3>
<span class="time">-Robyn Estroff</span>
</li>
</ul>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<i class="material-icons"></i>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</div>
CSS
.row-dark{
background-color: #ddd;
}
.quote-carousel{
h6{
color: $purple;
font-weight: bold;
text-align: center;
}
h3{
color: $dark-navy-blue;
font-weight: 100;
padding: 30px 0px 30px 0px;
margin: 0% 12% -1% 12%;
}
.carousel{
position: relative;
width: 60%;
margin: 0 auto;
min-height: 170px;
padding-left: 5%;
padding-right: 5%;
}
.carousel-control{
padding-top: 4%;
padding-bottom: 7%;
width:7%;
}
.material-icons{
color: $black;
padding: 0px;
border: 1px solid $darkest-grey;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.active{
margin-top: -13px;
}
.thumbnails{
padding: 0px 40px;
li{
margin-bottom: 5%;
}
}
.slide-content{
text-align: center;
}
}
/***************** TABLET **************/
@media (min-device-width: $screen-sm-min) and (max-device-width: $screen-lg-min) {
.quote-carousel h3{
margin: 0 auto;
padding: 30px 0px 15px;
}
.carousel-control{
background-color: #ebebeb;
padding-top: 4%;
padding-bottom: 7%;
width: 7%;
}
}
/****************** MOBILE ***************/
@media (max-device-width: $screen-xs-max) {
.quote-carousel h3{
margin: 0 auto;
font-size: 12px;
padding: 30px 0px 15px;
}
.carousel-control{
background-color: #ebebeb;
padding-top: 4%;
padding-bottom: 7%;
width: 7%
}
}
jQuery
$('.left').hide();
$('.carousel').carousel({
wrap: false
}).on('slid.bs.carousel', function () {
curSlide = $('.active');
if(curSlide.is( ':nth-child(2)' )) {
$('.left').hide();
return;
} else {
$('.left').show();
}
if (curSlide.is( ':last-child' )) {
$('.right').hide();
return;
} else {
$('.right').show();
}
});
这是获取祖父母类并从那里应用属性,但我不知道如果行背景是透明的,如何将控件背景设置为白色
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.parent().parent().parent().parent().css(property);
if(property && value) $this.css(property, value);
};
$('.carousel-control').inheritGrandparent('background');
Fiddle:https://jsfiddle.net/ccajtj64/1/
我认为最简单的方法是将函数转换为条件函数,看看祖父母是否有.row-default
类,并相应地应用。
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
grandparent = $this.closest('.row'),
value = grandparent.css(property);
if (property && value) {
if (grandparent.hasClass('row-default')) {
$this.css(property, 'white');
} else {
$this.css(property, value);
}
}
};
$('.carousel-control').inheritGrandparent('background');
但是您也可以检查祖父母类的值并使用条件。不过,它返回的值可能不一致,并且因浏览器而异。
jQuery.fn.inheritGrandparent = function( property ) {
var $this = $(this),
value = $this.closest('.row').css(property);
if (property && value) {
if (value.indexOf('transparent') !== -1 || value.indexOf('rgba(0, 0, 0, 0)') !== -1 ) {
$this.css(property, 'white');
} else {
$this.css(property, value);
}
}
};
$('.carousel-control').inheritGrandparent('background');