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

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

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


reactjs javascript slider react-slick
person Community    schedule 06.02.2019    source источник
comment
вроде работает нормально. Стрелки появляются, когда я добавляю в пример другие изображения. codeandbox.io/s/woqj1z2nq8   -  person ManavM    schedule 06.02.2019
comment
Ооо у меня было всего 4 фото, а не 5 это потому что не работало   -  person    schedule 06.02.2019
comment
Можете ли вы сказать мне, с какой именно проблемой вы столкнулись? Из того, что я вижу, если количество изображений больше 4, отображаются стрелки влево и вправо.   -  person ManavM    schedule 06.02.2019

Ответы (2)


arrow_upward
5
arrow_downward

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

.slick-prev {
  left: 3% !important;
  z-index: 1;
}
.slick-next {
  right: 3% !important;
  z-index: 1;
}
person Ali Shahzil    schedule 22.11.2020

arrow_upward
0
arrow_downward

Все дело в количестве слайдов и настройке 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

person Rob B    schedule 06.02.2019