Yêu cầu thg 1 22, 2019 9:24 SA 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 thg 1 22, 2019 9:37 SA
Đã đượ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
thg 1 22, 2019 9:44 SA

đượ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
thg 1 22, 2019 9:54 SA

@wiliamfeng

Carousel-antd.png

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

Avatar Hoang vn @wiliamfeng
thg 1 22, 2019 9:58 SA

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

Avatar Vũ Nguyễn @vunguyen10111995
thg 1 22, 2019 9:58 SA

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

thg 1 23, 2019 1:35 SA

@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
thg 1 23, 2019 1:53 SA

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

Avatar Hoang vn @wiliamfeng
thg 1 23, 2019 4:09 SA

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

thg 1 23, 2019 4:15 SA

@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
thg 1 23, 2019 4:22 SA

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

Avatar Hoang vn @wiliamfeng
thg 1 24, 2019 9:28 SA

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
thg 1 25, 2019 4:37 SA

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

thg 1 26, 2019 2:16 SA
Avatar hien nguyen @chuyennho2x
thg 9 24, 2021 5:54 SA
Avatar hien nguyen @chuyennho2x
thg 9 24, 2021 5:56 SA

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í