Реагируйте: добавьте className = "active" в элемент списка после горизонтальной прокрутки (css: overflow-x: scroll;) - PullRequest
Новая
       21

Реагируйте: добавьте className = "active" в элемент списка после горизонтальной прокрутки (css: overflow-x: scroll;)

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

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

В настоящее время одно изображение заполняет всю ширину окна, и при прокрутке следующий элемент становится видимым. Но я также хочу сделать этот переключатель видимым в элементе списка ul. По сути, после прокрутки я хочу, чтобы className из элемента 1 списка стал «неактивным», а вторые элементы списка className стал «активным» и т. Д.

В основном основной компонент выглядит примерно так: 

import React, { Component } from 'react';
import Slider from './Slider';

export default class Property extends Component {

  constructor(props) {
    super(props);
    this.state = {
      object: [
        {
          title: "...",
          description: "...",
          img: "...",
        },
        {
          ...}
      ]
    };
  }

  render() {
    return (
      <div id="property">
        <div className="detailsWrapper">
          <h2>Lodge Highlights</h2>
          <Slider object={this.state.object}/>
          <ul>
            <li className="is-active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    )
  }
}

Мой компонент Slider выглядит следующим образом: 

import React, { Component } from 'react';

export default class Slider extends Component {

  render() {
    return (
      <div className="higlights_slider">
        {this.props.object.map((eachObject, index) => {
          return (
            <div className="highlights_slider_content" key={eachObject.id} value={eachObject.id}>
              <img src={eachObject.img} alt=""/>
              <h3>{eachObject.title}</h3>
              <h4>{eachObject.description}</h4>   
            </div>
            )
           })}
        </div>
    )
  }
}

А в моем css (или s css) я использую для .highlights_slider overflow-x: scroll

Любая помощь приветствуется! Заранее спасибо !!

Ответы [ 2 ]

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

вам нужен только один класс. Наблюдатель будет информировать вас каждый раз, когда ползунок превышает пороговое значение, чтобы вы могли удалить класс из слайда с текущим индексом - 1 и добавить класс на текущем слайде.

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

Есть много способов сделать это, но я бы порекомендовал наблюдателя пересечения https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API для каждого слайда (лучший способ).

Дайте мне знать, если вам нужна помощь в реализации наблюдателя.

Вам нужен только один класс. Наблюдатель будет информировать вас каждый раз, когда ползунок превышает пороговое значение, чтобы вы могли удалить класс из слайда с текущим индексом - 1 и добавить класс на текущем слайде.

...