Как установить стрелки управления на пользовательскую кнопку - PullRequest
Новая
       21

Как установить стрелки управления на пользовательскую кнопку

1 голос
/ 08 июля 2019

Я добавил react-slick в свой проект, чтобы показать carousel. Я хочу управлять своим ползунком с помощью специальной кнопки «Далее» и «Предыдущая», которая находится в верхней части содержимого ползунка. поэтому я следовал документации по пользовательским стрелкам, но я не хочу показывать свои кнопки внутри скользкого содержимого, я хочу назначить элементы управления кнопке над содержимым слайдера. Как этого добиться? Я включил свой код из компонента, который я создал. 

import React from 'react';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

function SampleNextArrow(props) {
  const { onClick } = props;
  return (
    <React.Fragment>
      <Button
        onClick={onClick} className="slickRight">
        Next
      </Button>
    </React.Fragment>
  );
}
function SamplePrevArrow(props) {
  const { onClick } = props;
  return (
    <React.Fragment>
      <Button
        onClick={onClick} className="slickLeft">
        Prev
      </Button>
    </React.Fragment>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    var settings = {
      infinite: true,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 1,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
    };
    return (
      <div>
        {/*Want to Add Control to this Buttons*/
        <Button>Prev</Button>
        <Button>Next</Button>
        
        <div className="container">
          <Slider {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
          </Slider>
        </div>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 13 июля 2019

Nandhini, Вам необходимо необходимо полностью прочитать документацию перед использованием пакета.

В официальном документе уже есть метод для этого https://react -slick.neostack.com / docs / example / previous-next-method

Используйте его.

...