Question

问题是隐藏上滑按钮。我一直在尝试使用：

在图像中设置它

.slick-prev:before {

  color: red;
  font-size: 50px;

}


.slick-next:before {

  color: red;
  font-size: 50px;

}
.slick-prev { left: 50px }
.slick-next { right: 50px }

.slick-next可以正常工作，但是.slick-prev设置为该值时就会消失。

这是我对该组件的声明：

import { useStaticQuery, graphql } from "gatsby"
import React from "react"
import Img from "gatsby-image"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"
import Slider from "react-slick"

function SlickAll() {

  const query = useStaticQuery(
    graphql`
    query {
      allFile(
        sort: { fields: name, order: DESC }
        filter: { relativeDirectory: { eq: "main-page-images" } }
      ) {
        edges {
          node {
            id
            name
            childImageSharp {
              fluid(maxWidth: 350, maxHeight: 250) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
    `
  )

  const setting = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    draggable: true,
    arrows: true,
  }


  //Minus 1 for array offset from 0

  return (
    <div>

    <Slider {...setting}>
      {query.allFile.edges.map(image => (
        <div className="imageContainer">
          <Img fluid={image.node.childImageSharp.fluid} />
        </div>
      ))}
    </Slider>
    </div>
  )
}
export default SlickAll

图片：如下图所示，未设置左值时，控件位于图像后面。即使我设置left：1px，它也不会移动，只会消失。

有人知道发生了什么事吗？

https://imgur.com/a/hE0B2ku

更新

按钮在图像后面，默认的左值为-55，如何使它显示在图像前面？

Answer 1

由于某些原因，左按钮的z-index小于图像。尝试为它们都添加更多的z-index来显示。

（或者您可以制作将图片显示为背景并在其中包装按钮的包装器。）

滑动滑块React控件在移动时会消失，并且在图像后面

1 个答案: