Блог

Главная - Вопросы по программированию - Как скрыть таймер в слайдере React Awesome при автозапуске

Как скрыть таймер в слайдере React Awesome при автозапуске

#javascript #reactjs #slider #carousel #autoplay

#javascript #reactjs #слайдер #карусель #автозапуск

Вопрос:

Я использую слайдер React Awesome с функцией автозапуска. Но когда я делаю это, таймер появляется при смене слайда и переносит элемент слайда. Хотя я установил showtime: {false} , он отображается некорректно.

 import AwesomeSlider from 'react-awesome-slider'
import withAutoplay from 'react-awesome-slider/dist/autoplay'

const AutoplaySlider = withAutoplay(AwesomeSlider)

const MySlider = () => (
  <AutoplaySlider play={true} showTimer={false}>
     <div>1</div>
     <div>2</div>
     <div>3</div>
  </AutoplaySlider>
)

Комментарии:

1. Вы должны создать минимально воспроизводимый пример (лучше на codesandbox )

Ответ №1:

К сожалению, я не смог найти никакого решения для этого. Похоже, это ошибка, касающаяся слайдера React Awesome. Я мог бы отправить запрос на извлечение для этого. Однако я использовал CSS для принудительного скрытия таймера.

 .my-slider-class-name .awssld__timer {
    opacity: 0;
    pointer-events: none; /* prevent events (mouse clicking etc.) */
}

ПРИМЕЧАНИЕ: Когда я попробовал display: none it, слайдер перестал работать.