Элементы управления Slick-Slider React исчезают при его перемещении и за изображением - PullRequest
0 голосов
/ 29 октября 2019

Проблема в том, что кнопка 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, как мне сделать так, чтобы оно отображалось перед изображением?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...