Asked thg 1 22, 2019 9:24 AM 767 0 1
  • 767 0 1
+1

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

Share
  • 767 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 ANSWERS


Answered thg 1 22, 2019 9:37 AM
Accepted
+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

Share
Avatar Hoang vn @wiliamfeng
thg 1 22, 2019 9:44 AM

đượ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ỉ

+1
| Reply
Share
Avatar Vũ Nguyễn @vunguyen10111995
thg 1 22, 2019 9:54 AM

@wiliamfeng

Carousel-antd.png

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

+2
| Reply
Share
Avatar Hoang vn @wiliamfeng
thg 1 22, 2019 9:58 AM

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

+1
| Reply
Share
Avatar Vũ Nguyễn @vunguyen10111995
thg 1 22, 2019 9:58 AM

@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 =))

+2
| Reply
Share
thg 1 23, 2019 1:35 AM

@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

+1
| Reply
Share
Avatar Hoang vn @wiliamfeng
thg 1 23, 2019 1:53 AM

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

+1
| Reply
Share
Avatar Hoang vn @wiliamfeng
thg 1 23, 2019 4:09 AM

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

0
| Reply
Share
thg 1 23, 2019 4:15 AM

@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>
+1
| Reply
Share
Avatar Hoang vn @wiliamfeng
thg 1 23, 2019 4:22 AM

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

+1
| Reply
Share
Avatar Hoang vn @wiliamfeng
thg 1 24, 2019 9:28 AM

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 !

0
| Reply
Share
Avatar Hoang vn @wiliamfeng
thg 1 25, 2019 4:37 AM

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

0
| Reply
Share
thg 1 26, 2019 2:16 AM
+1
| Reply
Share
Avatar hien nguyen @chuyennho2x
thg 9 24, 2021 5:54 AM
Avatar hien nguyen @chuyennho2x
thg 9 24, 2021 5:56 AM

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

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.