Yêu cầu Jan 22nd, 2019 9:24 a.m. 1116 0 1
  • 1116 0 1
+1

[ANT - Design ] Làm sao để đặt thời gian tự động chạy cho slide

Chia sẻ
  • 1116 0 1

Em định sử dụng thư viện của Ant-Design để làm phần UI cho project về Reat.

Em đang xem qua tài liệu của nó về phần Carousel : https://ant.design/components/carousel/ nhưng chưa biết cách để thiết lập thời gian mặc định cho slide tự chạy. Ở đây có anh/chị nào từng dùng qua rồi có thể chỉ giúp e với được không ạ

E xin cám ơn mọi người !

1 CÂU TRẢ LỜI


Đã trả lời Jan 22nd, 2019 9:37 a.m.
Đã được chấp nhận
+6

bạn có thể thêm props autoplaySpeed và để chỉnh speed chạy như sau:

<Carousel autoplay autoplaySpeed={1000}>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
</Carousel>

Với 1000 = 1s

Chia sẻ
Avatar Hoang vn @wiliamfeng
Jan 22nd, 2019 9:44 a.m.

được rồi bạn ạ, cám ơn bạn nhiều nha mà sao bạn biết hay vậy, mình đọc trong DOC của nó không thấy có phần đó nhỉ

Avatar Vũ Nguyễn @vunguyen10111995
Jan 22nd, 2019 9:54 a.m.

@wiliamfeng

Carousel-antd.png

trong core của nó có ghi mà bạn

Avatar Hoang vn @wiliamfeng
Jan 22nd, 2019 9:58 a.m.

@vunguyen10111995 . Tks bạn nhiều nha. Mình còn gà quá ...

Avatar Vũ Nguyễn @vunguyen10111995
Jan 22nd, 2019 9:58 a.m.

@wiliamfeng k phải đâu, mình cũng k để ý, thấy bạn nói đến mình cũng mới mở ra đó, thường thì mình cũng chỉ đọc docs thôi chứ chưa gặp vấn đề thì cũng chưa mò sâu =))

Jan 23rd, 2019 1:35 a.m.

@wiliamfeng bạn có thể dùng react dev tool trên chrome và inspect component đó lên sẽ thấy danh sách các props mà nó có:

Screenshot from 2019-01-23 08-34-50.png

Avatar Hoang vn @wiliamfeng
Jan 23rd, 2019 1:53 a.m.

@HuyDQ ... hay quá, tks bạn nhiều nha

Avatar Hoang vn @wiliamfeng
Jan 23rd, 2019 4:09 a.m.

Mấy bạn cho mình hỏi thêm với , hình như phần Layout của ANT - Design này nó không responsive được giống như bên Bootstrap nhỉ:

https://ant.design/components/grid/

Demo: https://codesandbox.io/s/w0jzyv6r68

Jan 23rd, 2019 4:15 a.m.

@wiliamfeng đây nhé bạn

<Row gutter={16}>
      <Col className="gutter-row" xs={24} md={12}>
        <div className="gutter-box">col-6</div>
      </Col>
      <Col className="gutter-row" xs={24} md={12}>
        <div className="gutter-box">col-6</div>
      </Col>
      <Col className="gutter-row" xs={24} md={12}>
        <div className="gutter-box">col-6</div>
      </Col>
      <Col className="gutter-row" xs={24} md={12}>
        <div className="gutter-box">col-6</div>
      </Col>
</Row>
Avatar Hoang vn @wiliamfeng
Jan 23rd, 2019 4:22 a.m.

@HuyDQ Yehhh ... mình đã làm được , tks bạn nhiều : ))

Avatar Hoang vn @wiliamfeng
Jan 24th, 2019 9:28 a.m.

Cho mình hỏi thêm với, nếu như mình muốn bỏ border-radius của các đối tượng component trong thằng ANT Design này như button, input, .. thì chỉnh ở chỗ nào vậy mọi người. Mình đã thử tìm các thuộc tính trong props theo các cách trên mà không thấy ....Hiện tại mình vẫn phải thêm CSS để ghi đè .. nhưng mình không muốn làm như vậy.

Cám ơn mọi người một lần nữa !

Avatar Hoang vn @wiliamfeng
Jan 25th, 2019 4:37 a.m.

Không có cách nào khác phải không mọi người : ))

Jan 26th, 2019 2:16 a.m.
Avatar hien nguyen @chuyennho2x
Sep 24th, 2021 5:54 a.m.
Avatar hien nguyen @chuyennho2x
Sep 24th, 2021 5:56 a.m.

Mọi người cho mình hỏi ngoài xem bằng F12-inspect component thì mình có thể tìm/xem bằng cách nào khác ko, mình tìm trên visual studio code mà ko thấy tam.PNG

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí