Asked Jan 22nd, 9:24 AM 182 0 1
  • 182 0 1
+1

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

Share
  • 182 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 Jan 22nd, 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
Hoang vn @wiliamfeng
Jan 22nd, 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
Vũ Nguyễn @vunguyen10111995
Jan 22nd, 9:54 AM

@wiliamfeng

Carousel-antd.png

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

+2
|Reply
Share
Hoang vn @wiliamfeng
Jan 22nd, 9:58 AM

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

+1
|Reply
Share
Vũ Nguyễn @vunguyen10111995
Jan 22nd, 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
dqhuy @HuyDQ
Jan 23rd, 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
Hoang vn @wiliamfeng
Jan 23rd, 1:53 AM

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

+1
|Reply
Share
Hoang vn @wiliamfeng
Jan 23rd, 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

dqhuy @HuyDQ
Jan 23rd, 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
Hoang vn @wiliamfeng
Jan 23rd, 4:22 AM

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

+1
|Reply
Share
Hoang vn @wiliamfeng
Jan 24th, 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 !

Hoang vn @wiliamfeng
Jan 25th, 4:37 AM

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

Trần Ngọc Đức @s2banggia88
Jan 26th, 2:16 AM
+1
|Reply
Share