用滑塊轉換複製粗體和非粗體

好吧，所以我的網站滑塊（使用貓頭鷹傳送帶）導致我網站上的文本添加/減去重量。當它轉換時，文本顯得很薄，並且當它完成轉換（坐在單個圖像上）時，它會回到正確的大膽。用滑塊轉換複製粗體和非粗體

我的HTML如下：

<div id="lead-slider" class="owl-carousel oc-lead"> 
<div class="lead-slide"></div> 
<div class="slide2"></div> 
<div class="slide3"></div> 
<div class="slide4"></div> 
<div class="slide5"></div> 
<div class="slide6"></div> 
<div class="slide7"></div> 
<div class="slide8"></div> 
</div><!-- END OWL CAROUSEL -->

現在，這些幻燈片必須設置爲窗口或視口的高度，因此，這裏是相關聯的JavaScript功能有關的是：

$("#lead-slider").height($(window).height()) ; 

$(window).resize(function(){ 
$("#lead-slider").height($(window).height()); 

$(".lead-slide").height($(window).height()) ; 

$(window).resize(function(){ 
$(".lead-slide").height($(window).height()); 

}); 

$(".slide2").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide2").height($(window).height()); 

}); 

$(".slide3").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide3").height($(window).height()); 

}); 

$(".slide4").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide4").height($(window).height()); 

}); 

$(".slide5").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide5").height($(window).height()); 

}); 

$(".slide6").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide6").height($(window).height()); 

}); 

$(".slide7").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide7").height($(window).height()); 

}); 

$(".slide8").height($(window).height()) ; 

$(window).resize(function(){ 
$(".slide8").height($(window).height()); 

});

初始化滑塊JS如下：

$("#lead-slider").owlCarousel({ 

    autoPlay: 3000, 

    navigation : false, // Show next and prev buttons 
    slideSpeed : 500, 
    paginationSpeed : 400, 
    singleItem:true, 
    autoHeight : false 

    });

重要的是不要ES：這些圖片實際上是指div（.lead幻燈片，.slide2等）的背景元素，像這樣：

.lead-slide { 
background-image: url('../img/what-slide.jpg'); 
background-position: center bottom; 
background-size: cover; 
}

所以我試圖用貓頭鷹旋轉木馬JS選項無濟於事搞亂。我試過改變CSS背景大小。我的猜測是，window.height可能是在這裏責怪，但不知道爲什麼。似乎無論我嘗試什麼，該文本似乎在網站上都是粗體或無關緊要的。的最後一件事，一個鏈接，這是怎麼回事的演示：

https://www.youtube.com/watch?v=kpHMTvJiJhY&feature=youtu.be

任何想法，夥計們？非常感激。

來源

2014-06-26 Kevin Stachura

你並不需要所有的幻燈片-N等的代碼重複，你可以使用這個選擇'＃鉛滑塊div' –

右尼克，將添加更改！謝謝。 –

我相信這是一個webkit呈現問題。嘗試將下面的CSS代碼添加到頁面主體。

CSS：

body { 
    -webkit-font-smoothing: antialiased; 
}

來源

2015-01-26 16:41:20 Linus

用滑塊轉換複製粗體和非粗體

回答

相關問題