Reactjs скользкий слайд - PullRequest
Новая
       30

Reactjs скользкий слайд

2 голосов
/ 08 января 2020

Я делаю очень простой слайдер в reactjs, используя reactstrap (bootstrap) ..

Рабочий пример: https://codesandbox.io/s/compassionate-brook-fz5mm

    <CarouselItem
      onExiting={this.onExiting}
      onExited={this.onExited}
      key={item.src}
    >
      <img width="100%" src={item.src} alt={item.altText} />
      <CarouselCaption
        captionText={item.caption}
        captionHeader={item.caption}
      />
    </CarouselItem>

Здесь каждое изображение становится скользящим, когда мы нажимаем indicator или control, но я не хочу, чтобы это поведение.

Я хотел бы иметь точно так же, как в ссылке https://react-multi-carousel.now.sh/

Здесь, в этой ссылке, мы можем перемещать слайд с помощью мыши, скользящей влево и вправо ..

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

Любые изменения в существующей реализации также приветствуются (строго не jquery), но мне нужно добиться гладкого поведения с этой реализацией карусели реактивной ленты.

Я реализовал приведенный выше пример из Официальный reactstrap: https://reactstrap.github.io/components/carousel/, поэтому упомянутые ими свойства были использованы и в моем примере ..

Поскольку я новичок в reactjs и реагируем, пожалуйста, учтите это вопрос и помогите мне достичь этого поведения ..

1 Ответ

0 голосов
/ 09 января 2020

Я бы порекомендовал вам использовать ответную реакцию для достижения аналогичного поведения. Вы можете добавить свойства в объект настроек, чтобы показать количество элементов на каждом слайде. https://react-slick.neostack.com/

import Slider from 'react-slick';

export default function Slide() {
  const settings = {
      dots: false,
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1
    };

  return (
    <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </Slider>
      );
    }
...