Создавайте карусельные карты как в fb messenger в реагировать на js

Question

Я создаю виджет чата, такой как виджет для внутренней связи, в своей реакции на js, и я хочу добавить компонент карусельных карт, как в мессенджере Facebook.

На мобильном устройстве, когда пользователь проводит пальцем по одной карточке, следующая должна приходить и центрироваться, а в Интернете должна быть левая и правая кнопки, которые при нажатии показывают соответствующую карточку.

Я искал и не мог найти никаких пакетов для этого. Как я могу это реализовать? Я новичок, чтобы реагировать.

Answer 1

Как и другие ответы, у вас есть компонент карусели в Reaction-Boosttrap и Reactionstrap.

Лично я считаю, что Actrastrap имеет лучшую документацию, чем response-bootstrap.Вы можете просто найти пример для карусели в их официальном документе.https://reactstrap.github.io/components/carousel/

Но, в этом примере нет события смахивания, как вы ожидали, и я также не могу найти карусель с событием смахивания как для просмотра в Интернете, так и на мобильном устройстве.Итак, наконец, я решил создать собственную карусель с событием swipe.

Для Интернета я использовал onDragStart и onDragEnd.А для мобильного просмотра я использовал onTouchStart, onTouchMove и onTouchEnd, чтобы обнаружить пролистывание влево и вправо.

Здесь приведены изменения.

//Global variables to hold the last and current X-axis positions.
var lastX = 0;
var currentX = 0;

//For web, detect swipe left and right based on mouse drag events. 
handleMouse = e => {
    e.persist();
    let type = e.type.toLowerCase();
    if (type === "dragstart") {
      lastX = e.clientX;
    } else {
      if (lastX === 0 || e.clientX === 0 || lastX === e.clientX) {
        return;
      }
      if (e.clientX > lastX) {
        this.previous();
        console.log("swife right");
      } else {
        this.next();
        console.log("swife left");
      }
    }
  };

  //For mobile, detect swipe left and right based on touch events. 
  handleTouch = e => {
    e.persist();
    let type = e.type.toLowerCase();

    if (type === "touchstart") {
      lastX = e.touches[0].clientX;
    }

    if (type === "touchmove") {
      currentX = e.touches[0].clientX;
    }

    if (type === "touchend") {
      if (lastX === 0 || currentX === 0 || lastX === currentX) {
        return;
      }
      if (currentX > lastX) {
        this.previous();
        console.log("swife right");
      } else {
        this.next();
        console.log("swife left");
      }
    }
  };

  //Modified render.
  render() {
    const { activeIndex } = this.state;
    const slides = items.map(item => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img
            style={{ width: "100%" }}
            src={item.src}
            alt={item.altText}
            onTouchStart={e => this.handleTouch(e)}
            onTouchMove={e => this.handleTouch(e)}
            onTouchEnd={e => this.handleTouch(e)}
            onDragStart={e => this.handleMouse(e)}
            onDragEnd={e => this.handleMouse(e)}
          />
        </CarouselItem>
      );
    });

    return (
      <Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
        interval={false}
      >
        {slides}

        <CarouselControl
          direction="prev"
          directionText="Previous"
          onClickHandler={this.previous}
        />
        <CarouselControl
          direction="next"
          directionText="Next"
          onClickHandler={this.next}
        />
      </Carousel>
    );
   }
  }

Работает демо и скрипка .

Надеюсь, это поможет вам.

Answer 2

Как уже упоминалось в другом ответе, вы можете найти уже созданный компонент и использовать его.

Однако вы можете реализовать его самостоятельно, используя CSS scroll snap и flexbox.

Вот статья, которая описывает этот подход (не реагирует, но все еще применяется).

https://developers.google.com/web/updates/2018/07/css-scroll-snap

Answer 3

Reaction-Boosttrap имеет карусельный компонент

здесь и есть реагирующая-карусель здесь