我目前正在使用HTML / CSS和Javascript光滑滑块创建我的网页。我目前在我的图库标签上使用常规的滑块代码,但是,我以前的箭头按钮(.slick-prev:before)浸入了div类“ slider_1”的后面,而我的.slick-next:before箭头却应如何工作舒适地坐在div外面。
我在.slick-prev中添加了边距和填充:在此之前,它只是将箭头进一步推到div中。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
我希望能够将我先前的箭头移到div之外,以使其可操作。目前,箭头仅位于滑块内我的图像后面,没有任何作用。
最佳答案
理解:
阅读了您的问题后,我感觉到您遇到了层问题,因为您的下一个和上一个按钮被隐藏在其他Web元素后面。
解:
我们可以编写一些CSS来告诉它将图层位置更改为更高的分层编号,为此,我们使用Z-Index属性使用CSS并分配一个高编号(例如99)以确保其位于网页上所有其他元素的上方。
要使用z-index,我们必须指定一个position属性,其值为fixed,absolute或relative。
在我的示例中,我使用了相对值,以免篡改箭头最初所在的位置。
尝试代码:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
但是,如果发现该代码仅影响其中一个滑块,那么您可能希望向滑块HTML添加一个ID并编写CSS,如下所示:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
然后更改受影响的滑块的HTML以在其中也包含ID
<div class="slider1" id="slider1">