Masalahnya adalah tombol slick-prev disembunyikan. Saya telah mencoba mengaturnya di dalam gambar menggunakan:

.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 berfungsi dengan baik, tetapi .slick-prev hilang begitu saja ketika saya menetapkan nilai itu.

Inilah deklarasi komponen saya:

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: Seperti yang Anda lihat pada gambar di bawah, ketika nilai kiri tidak disetel, kontrol berada di belakang gambar. Bahkan jika saya set ke kiri: 1px, itu tidak bergerak, itu menghilang begitu saja.

Ada yang tahu apa yang sedang terjadi?

https://imgur.com/a/hE0B2ku

PERBARUI

Tombol ada di belakang gambar, nilai kiri default adalah -55, bagaimana saya bisa membuatnya tampil di depan gambar?

0
Link 29 Oktober 2019, 16:32

1 menjawab

Jawaban Terbaik

Untuk beberapa alasan tombol kiri z-index kurang dari gambar. Cobalah untuk menambahkan lebih banyak z-index ke keduanya untuk ditampilkan.

(Atau Anda dapat membuat pembungkus yang menampilkan gambar sebagai latar belakang dan membungkus tombol di dalamnya.)

1
varjod 29 Oktober 2019, 13:55