Проблема в том, что кнопка slick-prev скрыта. Я пытался установить его внутри изображения, используя:
.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
image: Как видно на рисунках ниже, когда левое значение не установлено, элемент управления находится позади изображения. Даже если я установлю влево: 1 пиксель, он не будет двигаться, он просто исчезнет.
Кто-нибудь знает, что происходит?
https://imgur.com/a/hE0B2ku
ОБНОВЛЕНИЕ
Кнопка находится за изображением, значение по умолчанию слева -55, как мне сделать так, чтобы оно отображалось перед изображением?