我目前正在使用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">

10-05 20:39
查看更多