Как добавить Slick-активный класс в точках Slider в React Slick - PullRequest
Новая
       31

Как добавить Slick-активный класс в точках Slider в React Slick

0 голосов
/ 04 марта 2019

Я использовал реагирующее пятно и сделал карусель, используя компонент Slider.Код ниже, 

const carousel = (props) => {
    return (
        <div style={{ height: '50%', marginTop: '20px' }}>
            <Slider {...settings}>
                <div className={text__bar}>
                    <div >
                        <font>Lorum Ipsum 1</font>
                    </div>
                    <div className={slide1} />
                </div>
                <div className={text__bar}>
                    <div>
                        <font>Lorum Ipsum 2</font>
                    </div>
                    <div className={slide1} />
                </div>
                <div className={text__bar}>
                    <div>
                        <font>Lorum Ipsum 3</font>
                    </div>
                    <div className={slide1} />
                </div>
            </Slider>
            <div className={purple__bar}></div>
        </div>
    );
};

И объект настроек, 

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    className: SlickMain,
    dotsClass: button__bar,
    arrows: false,
};

Я добавил несколько дополнительных CSS-кодов, чтобы стилизовать точки (кнопки) моей карусели, чтобы они выглядели так, как показано ниже,

dotbar

При просмотре инструментами разработчика кнопка, связанная с показанным в данный момент слайдом, получает класс CSS с именем 'slick-active'

injected-class

Что мне нужно сделать, это изменить цвет фона кнопки, соответствующей слайду, на черный, повторяя текущий цвет фиолетовый.

То, что я сделал, было, 

.button__bar li.slick-active button {
    opacity: .75;
    color: #000
}

Но это не сработает.Чего мне не хватает?

.button__bar - это класс точек, который я дал точкам в объекте настроек.

1 Ответ

0 голосов
/ 26 марта 2019

Это происходит потому, что я использую CSS-модули для загрузки своего CSS-файла.В следующем примере кода вы можете ясно видеть, что происходит.

https://codesandbox.io/s/1z2lnox5rq?fontsize=14

Поэтому в качестве решения я добавил добавление методов ниже к объекту настроек. 

const settings = {
  dots: true,
  infinite: true,
  speed: 1000,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  className: slickMain,
  dotsClass: button__bar,
  arrows: false,
  beforeChange: (prev, next) => {
    this.setState({ currentSlide: next });
  },
  // afterChange: (index) => this.setState({ currentSlide: index }),
  appendDots: dots => {
    return (
      <div>
        <ul>
          {dots.map((item, index) => {
            return (
              <li key={index}>{item.props.children}</li>
            );
          })}
        </ul>
      </div>
    )
  },
  customPaging: index => {
    return (
      <button style={index === this.state.currentSlide ? testSettings : null}>
        {index + 1}
      </button>
    )
  }
};

Чтобы решить мою проблему, я использовал beforeChange, чтобы получить индекс следующего слайда и сохранить его в состоянии.Затем с помощью appendDots a div с ul, li вводится в секцию точечной панели, которая.Внутри li button передается в качестве детской опоры, используя метод customPaging.Когда текущий слайд равен индексу customPaging, который находится в состоянии, тогда классу добавляется цвет фона. 

const testSettings = {
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    outline: '0'
}
...