Стрелки не отображаются в слике с 4 и более фотографиями

Question

Я пытаюсь отобразить следующую и предыдущую стрелки, когда у меня есть 4 и более фотографий на реагирующем пятне, но они не отображаются. Работает нормально с 3 или менее фотографиями.

Вот ссылка на код. https://codesandbox.io/s/wyyrl6zz3l

Answer 1

Его работа для меня изменения CSS

.slick-prev {
  left: 3% !important;
  z-index: 1;
}
.slick-next {
  right: 3% !important;
  z-index: 1;
}

Answer 2

Все дело в количестве слайдов в сравнении с настройкой slidesToShow. В вашем примере у вас было только 4 слайда, и он был настроен на показ 4 слайдов одновременно; поэтому стрелки не нужны.

Установите slidesToShow ниже, чем количество слайдов, т.е. по 1 за раз, и компонент отвечает соответственно.

render() {
var settings = {
  dots: true,
  slidesToShow: 1, //if this is less than # of slides, arrows and dots will appear
};

https://codesandbox.io/s/q9o85r7xz6

Answer 3

Из документа вы можете написать свои собственные стрелки

      function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "red" }}
      onClick={onClick}
    />
  );
}

      function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <div
      className={className}
      style={{ ...style, display: "block", background: "green" }}
      onClick={onClick}
    />
  );
}

Затем добавьте их в настройки

      const settings = {
      dots: true,
      infinite: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />
    };

Проверьте здесь документацию.

Одно важное замечание: если вы используете реагирующий материал, не меняйте styleк sxиначе не появится, вот так и должно быть

      function SampleNextArrow(props) {
  const { className, style, onClick } = props
  return (
    <Box
      className={className}
      style={{ ...style, display: 'block', background: 'red' }}
      onClick={onClick}
    />
  )
}

Answer 4

Вам нужно импортировать эти два файла перед вашими пользовательскими файлами стилей. Единственная проблема заключается в том, что два вышеуказанных файла перезаписывают ваш пользовательский стиль:

      import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

Затем получите класс, проверив элемент и работая с вашей таблицей стилей. В моем случае это работает.

Answer 5

Задайте цвет этим двум внешним классам, чтобы отобразить кнопки «Назад» и «Далее».

      .slick-prev:before,.slick-next:before {
  color: red;
}

Answer 6

Дайте этому Css показать значок стрелки.