Bootstrap Thêm mẫu biểu mẫu sản phẩm CodePen

Question

Băng chuyền là một trình chiếu để xoay vòng qua một loạt nội dung, được tạo bằng các biến đổi CSS 3D và một chút JavaScript. Nó hoạt động với một loạt hình ảnh, văn bản hoặc đánh dấu tùy chỉnh. Nó cũng bao gồm hỗ trợ cho các điều khiển và chỉ báo trước đó/tiếp theo

Nội dung chính Show

Chỉ trang trình bày
Với điều khiển
Với chú thích
Khoảng thời gian Previous Next 8 cá nhân
Cách sử dụng
Thông qua thuộc tính dữ liệu
Qua JavaScript
Tùy chọn
phương pháp
Sự kiện
Thay đổi thời lượng chuyển tiếp

Trong các trình duyệt hỗ trợ API Hiển thị Trang, băng chuyền sẽ tránh trượt khi người dùng không nhìn thấy trang web (chẳng hạn như khi tab trình duyệt không hoạt động, cửa sổ trình duyệt được thu nhỏ, v.v. )

Xin lưu ý rằng các băng chuyền lồng nhau không được hỗ trợ và các băng chuyền thường không tuân thủ các tiêu chuẩn trợ năng

Cuối cùng, nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó

Thí dụ

Băng chuyền không tự động chuẩn hóa kích thước trang trình bày. Do đó, bạn có thể cần sử dụng các tiện ích bổ sung hoặc kiểu tùy chỉnh để định cỡ nội dung phù hợp. Mặc dù băng chuyền hỗ trợ các điều khiển và chỉ báo trước đó/tiếp theo, nhưng chúng không bắt buộc phải có. Thêm và tùy chỉnh khi bạn thấy phù hợp

Lớp

0 cần được thêm vào một trong các trang chiếu nếu không băng chuyền sẽ không hiển thị. Ngoài ra, hãy đảm bảo đặt một id duy nhất trên

1 cho các điều khiển tùy chọn, đặc biệt nếu bạn đang sử dụng nhiều băng chuyền trên một trang. Các phần tử kiểm soát và chỉ báo phải có thuộc tính

2 (hoặc

3 đối với các liên kết) khớp với id của phần tử

1

Chỉ trang trình bày

Đây là băng chuyền chỉ có các trang trình bày. Lưu ý sự hiện diện của

5 và

6 trên hình ảnh băng chuyền để ngăn việc căn chỉnh hình ảnh mặc định của trình duyệt

Với điều khiển

Thêm vào các điều khiển trước đó và tiếp theo

Bạn cũng có thể thêm các chỉ báo vào băng chuyền, cùng với các điều khiển

Với chú thích

Thêm chú thích vào trang chiếu của bạn một cách dễ dàng với phần tử

7 trong bất kỳ

8 nào. Chúng có thể được ẩn dễ dàng trên các khung nhìn nhỏ hơn, như hình bên dưới, với các tiện ích hiển thị tùy chọn. Chúng tôi ẩn chúng ban đầu với

9 và đưa chúng trở lại trên các thiết bị cỡ trung bình với

0

trang trình bày đầu tiên

Nhãn trượt đầu tiên

Nulla vitae elit libero, pharetra augue mollis interdum

trang trình bày thứ hai

Nhãn trượt thứ hai

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Trang trình bày thứ ba

Nhãn trượt thứ ba

Praesent commodo cursus magna, vel scelerisque nisl consectetur


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.




        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

chéo

Thêm

1 vào băng chuyền của bạn để tạo hiệu ứng động cho các trang chiếu bằng hiệu ứng chuyển tiếp mờ dần thay vì trang chiếu

Khoảng thời gian Previous Next 8 cá nhân

Thêm

3 vào

8 để thay đổi khoảng thời gian trì hoãn giữa các lần tự động chuyển sang mục tiếp theo

Cách sử dụng

Thông qua thuộc tính dữ liệu

Sử dụng các thuộc tính dữ liệu để dễ dàng kiểm soát vị trí của băng chuyền.

5 chấp nhận các từ khóa

6 hoặc

7, làm thay đổi vị trí trang chiếu so với vị trí hiện tại của nó. Ngoài ra, sử dụng

8 để chuyển chỉ mục trang trình bày thô tới băng chuyền

9, chuyển vị trí trang trình bày sang một chỉ mục cụ thể bắt đầu bằng


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

0

Thuộc tính


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

1 được sử dụng để đánh dấu băng chuyền là hoạt ảnh bắt đầu từ khi tải trang. Nếu bạn không sử dụng


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.




        
      
    
    
      
      Previous
    
    
      
      Next

1 để khởi tạo băng chuyền của mình, thì bạn phải tự khởi tạo nó. Nó không thể được sử dụng kết hợp với khởi tạo JavaScript rõ ràng (dư thừa và không cần thiết) của cùng một băng chuyền

Qua JavaScript

Gọi băng chuyền theo cách thủ công với

$('.carousel').carousel()

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

3, như trong

3

NameTypeDefaultDescriptionintervalnumber5000Lượng thời gian để trì hoãn giữa việc tự động quay vòng một mục. Nếu sai, băng chuyền sẽ không tự động quay vòng. keyboardbooleantrue Liệu băng chuyền có phản ứng với các sự kiện bàn phím hay không. chuỗi tạm dừng. boolean"di chuột"

Nếu được đặt thành


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

5, tạm dừng chu kỳ của băng chuyền vào ngày


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

6 và tiếp tục chu kỳ của băng chuyền vào ngày


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

7. Nếu được đặt thành


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

8, việc di chuột qua băng chuyền sẽ không tạm dừng băng chuyền

Trên các thiết bị hỗ trợ cảm ứng, khi được đặt thành


  

    

      
      
      
    
    
      

        
        

          
First slide label
          Nulla vitae elit libero, a pharetra augue mollis interdum.
        
      
      
        
        

          
Second slide label
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        
      
      
        
        

          
Third slide label
          Praesent commodo cursus magna, vel scelerisque nisl consectetur.
        
      
    
    
      
      Previous
    
    
      
      Next

5, quá trình đạp xe sẽ tạm dừng vào ngày

0 (sau khi người dùng tương tác xong với băng chuyền) trong hai khoảng thời gian, trước khi tự động tiếp tục. Lưu ý rằng đây là ngoài hành vi chuột ở trên

ridestringfalseTự động phát băng chuyền sau khi người dùng xoay vòng mục đầu tiên theo cách thủ công. Nếu là "băng chuyền", tự động phát băng chuyền khi tải. wrapbooleantrueLiệu băng chuyền có quay vòng liên tục hay có các điểm dừng cứng không. touchbooleantrueCho dù băng chuyền có hỗ trợ tương tác vuốt sang trái/phải trên thiết bị màn hình cảm ứng hay không

phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin

1

Khởi tạo băng chuyền với một tùy chọn tùy chọn

2 và bắt đầu quay vòng qua các mục

$('.carousel').carousel({
  interval: 2000
})

3

Xoay vòng qua các mục băng chuyền từ trái sang phải

4

Dừng băng chuyền quay vòng qua các mục

5

Xoay vòng băng chuyền đến một khung cụ thể (dựa trên 0, tương tự như một mảng). Trả về người gọi trước khi mục đích được hiển thị (i. e. trước khi sự kiện

6 xảy ra)

7

Chu kỳ đến mục trước đó. Trả về người gọi trước khi mục trước đó được hiển thị (i. e. trước khi sự kiện

6 xảy ra)

9

Chu kỳ đến mục tiếp theo. Trả về người gọi trước khi mục tiếp theo được hiển thị (i. e. trước khi sự kiện

6 xảy ra)

1

Phá hủy băng chuyền của một phần tử

Sự kiện

Lớp băng chuyền của Bootstrap hiển thị hai sự kiện để nối vào chức năng băng chuyền. Cả hai sự kiện đều có các thuộc tính bổ sung sau

2. Hướng mà băng chuyền đang trượt (_______20_______3 hoặc

4)

5. Phần tử DOM đang được trượt vào vị trí làm mục hoạt động

6. Chỉ số của mục hiện tại

7. Chỉ mục của mục tiếp theo

Tất cả các sự kiện băng chuyền được kích hoạt tại chính băng chuyền (i. e. tại

). Loại sự kiệnMô tảslide. bs. băng chuyền Sự kiện này kích hoạt ngay lập tức khi phương thức đối tượng

8 được gọi. trượt. bs. băng chuyền Sự kiện này được kích hoạt khi băng chuyền đã hoàn thành quá trình chuyển đổi trang chiếu của nó.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Thay đổi thời lượng chuyển tiếp

Thời lượng chuyển tiếp của

8 có thể được thay đổi bằng biến

$('.carousel').carousel()

0 Sass trước khi biên dịch hoặc kiểu tùy chỉnh nếu bạn đang sử dụng CSS đã biên dịch. Nếu áp dụng nhiều chuyển đổi, hãy đảm bảo rằng chuyển đổi chuyển đổi được xác định trước (ví dụ:.

$('.carousel').carousel()

1)

programming bootstrap

Bootstrap Thêm mẫu biểu mẫu sản phẩm CodePen

Thí dụ

Chỉ trang trình bày

Với điều khiển

Với chú thích

Nhãn trượt đầu tiên

Nhãn trượt thứ hai

Nhãn trượt thứ ba

First slide label

Second slide label

Third slide label

chéo

Khoảng thời gian Previous Next 8 cá nhân

Cách sử dụng

Thông qua thuộc tính dữ liệu

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

Qua JavaScript

Tùy chọn

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

phương pháp

Các phương thức và chuyển tiếp không đồng bộ

(adsbygoogle = window.adsbygoogle || []).push({}); Previous Next 1

Previous Next 3

Previous Next 4

Previous Next 5

Previous Next 7

Previous Next 9

Previous Next 1

Sự kiện

Thay đổi thời lượng chuyển tiếp

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

`Previous Next`
1

`Previous Next`
3

`Previous Next`
4

`Previous Next`
5

`Previous Next`
7

`Previous Next`
9

`Previous Next`
1