Hướng Dẫn Và Ví Dụ Bootstrap Carousel - Openplanning

Trang chủ » Sử Dụng Bootstrap để Chuyển Banner Tĩnh Thành Dạng Slideshow » Hướng Dẫn Và Ví Dụ Bootstrap Carousel - Openplanning

Có thể bạn quan tâm

  • Tất cả tài liệu
  • Java
    • Java Basic
    • Java Collections Framework
    • Java IO
    • Java New IO
    • Java Date Time
    • Servlet/JSP
    • Eclipse Tech
      • SWT
      • RCP
      • RAP
      • Eclipse Plugin Tools
    • XML & HTML
    • Java Opensource
    • Java Application Servers
  • Maven
  • Gradle
  • Servlet/Jsp
  • Thymeleaf
  • Spring
    • Spring Boot
    • Spring Cloud
  • Struts2
  • Hibernate
  • Java Web Service
  • JavaFX
  • SWT
  • Oracle ADF
  • Android
  • iOS
  • Python
  • Swift
  • C#
  • C/C++
  • Ruby
  • Dart
  • Batch
  • Database
    • Oracle
    • MySQL
    • SQL Server
    • PostGres
    • Other Database
  • Oracle APEX
  • Report
  • Client
  • ECMAScript / Javascript
  • TypeScript
  • NodeJS
  • ReactJS
  • Flutter
  • AngularJS
  • HTML
  • CSS
  • Bootstrap
  • OS
    • Ubuntu
    • Solaris
    • Mac OS
  • VPS
  • Git
  • SAP
  • Amazon AWS
  • Khác
    • Chưa phân loại
    • Phần mềm & ứng dụng tiện ích
    • VirtualBox
    • VmWare
Hướng dẫn và ví dụ Bootstrap Carousel
  1. Bootstrap Carousel
  2. Carousel với Controls
  3. Carousel với Indicators
  4. Carousel với phụ đề (Caption)
  5. Hiệu ứng (Effect)
  6. Các tùy chọn cho Carousel

1. Bootstrap Carousel

Carousel (Băng truyền) giống như là một trình chiếu (slidershow), nó hiển thị xoay vòng một vài nội dung, chẳng hạn như ảnh, văn bản,... Carousel của Bootstrap được xây dựng dựa trên CSS và một chút Javascript.Dưới đây là hình ảnh minh họa một Carousel, nó hiển thị xoay vòng một vài ảnh.Một Carousel đầy đủ có cấu trúc giống hình minh họa dưới đây:Một Carousel đơn giản nhất là chỉ bao gồm các Item (Slider) và nội dung của mỗi Slider là một ảnh. Nó không bao gồm các điều khiển (Controls), và không có Indicators.simple-carousel-example.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Carousel</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <h4 class="mb-3">Simple Carousel</h4> <div id="myCarousel" class="carousel slide border" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>

2. Carousel với Controls

Một Carousel thông thường có các nút "Next" và "Previous" cho phép người dùng nhẩy đến một Slider tiếp theo hoặc lùi lại Slider trước đó. Chúng được gọi là các điều khiển (Controls).Carousel with Control<div id="myCarousel" class="carousel slide border" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> </div> </div> <!-- Controls --> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>Ví dụ tùy biến Controls:Custom Controls.carousel-control-prev-icon { background-image: url(../images/previous-32.png); width: 32px; height: 32px; } .carousel-control-next-icon { background-image: url(../images/next-32.png); width: 32px; height: 32px; }

3. Carousel với Indicators

Indicators giống như các Shortcut giúp người dùng nhẩy tới một Item (Slider) cụ thể trong danh sách các Item của Carousel. Chú ý: Các Item trong Carousel được đánh chỉ số (index) bắt đầu từ 0 (0, 1, 2,..)Carousel Indicators<div id="myCarousel" class="carousel slide border" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> ... </div>Carousel Indicators<div id="myCarousel" class="carousel slide border" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> </div> </div> <!-- Controls --> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>Dưới đây là một vài ví dụ tùy biến Indicators.Custom Indicators (1)Custom Indicators (1).carousel-indicators li { width: 20px; height: 20px; border-radius: 100%; }Custom Indicators (2)Custom Indicators (2).carousel-indicators li { text-indent: 0px; text-align: center; color: red; margin: 0 2px; width: 30px; height: 30px; border: none; border-radius: 100%; line-height: 30px; background-color: #999; transition: all 0.25s ease; } .carousel-indicators .active, .hover { margin: 0 2px; width: 30px; height: 30px; background-color: #337ab7; }Custom Indicators (2)<div id="myCarousel" class="carousel slide border" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active">1</li> <li data-target="#myCarousel" data-slide-to="1">2</li> <li data-target="#myCarousel" data-slide-to="2">3</li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>Custom Indicators (3)Cutom Indicators (3).carousel-indicators { position: absolute; bottom: 0; margin: 0; left: 0; right: 0; width: auto; } .carousel-indicators li, .carousel-indicators li.active { float: left; width: 33%; height: 10px; margin: 0; border-radius: 0; border: 0; background: #ccc; } .carousel-indicators li.active { background: orange; }

4. Carousel với phụ đề (Caption)

Với mỗi Slider bạn có thể thêm phụ đề (Caption) cho nó. Điều này dễ dàng làm được bằng cách bao bọc nội dung phụ đề của bạn trong thẻ <div class="carousel-caption">.Carousel Item with Caption!<div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat"> <!--Caption here --> <div class="carousel-caption"> <h5>Black Cat</h5> <small> A black cat is a domestic cat with black fur that may be a mixed or specific breed </small> </div> </div>Carousel with caption<div id="myCarousel" class="carousel slide border" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard"> <div class="carousel-caption"> <h5>Leopard</h5> <small> A black Panther is the melanistic color variant of any big cat species. Black Panthers in Asia and Africa are leopards (Panthera pardus). </small> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat"> <div class="carousel-caption"> <h5>Black Cat</h5> <small> A black cat is a domestic cat with black fur that may be a mixed or specific breed </small> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> <div class="carousel-caption"> <h5>Lion</h5> <small> The lion (Panthera leo) is a species in the cat family (Felidae). A muscular, deep-chested cat, it has a short, rounded head, a reduced neck and round ears </small> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>Các phụ đề nên được hiển thị đối với các thiết bị có chiều rộng màn hình lớn, đối với các thiết bị màn hình quá nhỏ bạn có thể ẩn nó đi, điều này có thể thực hiện được với sự hỗ trợ của lớp .d-(sm|md|lg|xl)-block, .d-none.
LớpMô tả
.d-sm-block .d-noneCaption sẽ hiển thị nếu chiều rộng của Carousel >= 567px. Ngược lại nó sẽ bị ẩn.
.d-md-block .d-noneCaption sẽ hiển thị nếu chiều rộng của Carousel >= 768px. Ngược lại nó sẽ bị ẩn.
.d-lg-block .d-noneCaption sẽ hiển thị nếu chiều rộng của Carousel >= 992px. Ngược lại nó sẽ bị ẩn.
.d-xl-block .d-noneCaption sẽ hiển thị nếu chiều rộng của Carousel >= 1200px. Ngược lại nó sẽ bị ẩn.
carousel-responsive-caption-example.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap Carousel</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <div class="container-fluid"> <h4 class="mb-3">Responsive Carousel with Caption</h4> <p>.carousel-caption .d-none .d-sm-block</p> <div id="myCarousel" class="carousel slide border" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard"> <div class="carousel-caption d-none d-sm-block"> <h5>Leopard</h5> <small> A black Panther is the melanistic color variant of any big cat species. Black Panthers in Asia and Africa are leopards (Panthera pardus). </small> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat"> <div class="carousel-caption d-none d-sm-block"> <h5>Black Cat</h5> <small> A black cat is a domestic cat with black fur that may be a mixed or specific breed </small> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> <div class="carousel-caption d-none d-sm-block"> <h5>Lion</h5> <small> The lion (Panthera leo) is a species in the cat family (Felidae). A muscular, deep-chested cat, it has a short, rounded head, a reduced neck and round ears </small> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>

5. Hiệu ứng (Effect)

Thêm lớp .carousel-fade cho Carousel, bạn sẽ nhìn thấy hiệu ứng fade (Nhòe) khi Carousel chuyển từ Slider này sang một Slider khác..carousel-fade<div id="myCarousel" class="carousel carousel-fade slide border" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat"> </div> <div class="carousel-item"> <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion"> </div> </div> <!-- Controls --> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

6. Các tùy chọn cho Carousel

Có một vài tùy chọn mà bạn có thể áp dụng cho Carousel, chẳng hạn thiết lập khoảng thời gian mà Carousel tạm ngừng trước khi chuyển sang Slider kế tiếp, thiết lập cho phép Carousel tự động xoay vòng (cycle) hay không....TODO!!

Các hướng dẫn Bootstrap

  • Hướng dẫn và ví dụ Bootstrap Jumbotron
  • Hướng dẫn và ví dụ Bootstrap Dropdown
  • Hướng dẫn và ví dụ Bootstrap Alert
  • Hướng dẫn và ví dụ Bootstrap Button
  • Hướng dẫn và ví dụ Bootstrap Button Group
  • Hướng dẫn và ví dụ Bootstrap Popover (Tooltip)
  • Hướng dẫn và ví dụ Bootstrap Spinner
  • Giới thiệu về Bootstrap
  • Hướng dẫn sử dụng hệ thống lưới trong Bootstrap
  • Hướng dẫn và ví dụ Bootstrap Card
  • Hướng dẫn và ví dụ Bootstrap Container
  • Hướng dẫn và ví dụ Bootstrap Nav, Tab, Pill
  • Hướng dẫn và ví dụ Bootstrap NavBar
  • Hướng dẫn và ví dụ Bootstrap Table
  • Hướng dẫn và ví dụ Bootstrap Modal
  • Hướng dẫn và ví dụ Bootstrap Form
  • Hướng dẫn và ví dụ Bootstrap Pagination
  • Hướng dẫn và ví dụ Bootstrap Badge
  • Hướng dẫn và ví dụ Bootstrap Input Group
  • Hướng dẫn và ví dụ Bootstrap List Group
  • Hướng dẫn và ví dụ Bootstrap ProgressBar
  • Hướng dẫn và ví dụ Bootstrap Collapse và Accordion
  • Hướng dẫn và ví dụ Bootstrap Scrollspy
  • Hướng dẫn và ví dụ Bootstrap Breadcrumb
  • Hướng dẫn và ví dụ Bootstrap Carousel
  • Hướng dẫn và ví dụ tiện ích Bootstrap Spacing
  • Hướng dẫn và ví dụ tiện ích Bootstrap Border
  • Hướng dẫn và ví dụ tiện ích Bootstrap Color
  • Hướng dẫn và ví dụ tiện ích Bootstrap Text
  • Hướng dẫn và ví dụ tiện ích Bootstrap Sizing
  • Hướng dẫn và ví dụ tiện ích Bootstrap Position
  • Hướng dẫn và ví dụ tiện ích Bootstrap Flex
  • Hướng dẫn và ví dụ tiện ích Bootstrap Display
  • Hướng dẫn và ví dụ tiện ích Bootstrap Visibility
  • Hướng dẫn và ví dụ tiện ích Bootstrap Embed
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn CSS

Các hướng dẫn Bootstrap

  • Hướng dẫn và ví dụ Bootstrap Jumbotron
  • Hướng dẫn và ví dụ Bootstrap Dropdown
  • Hướng dẫn và ví dụ Bootstrap Alert
  • Hướng dẫn và ví dụ Bootstrap Button
  • Hướng dẫn và ví dụ Bootstrap Button Group
  • Hướng dẫn và ví dụ Bootstrap Popover (Tooltip)
  • Hướng dẫn và ví dụ Bootstrap Spinner
  • Giới thiệu về Bootstrap
  • Hướng dẫn sử dụng hệ thống lưới trong Bootstrap
  • Hướng dẫn và ví dụ Bootstrap Card
  • Hướng dẫn và ví dụ Bootstrap Container
  • Hướng dẫn và ví dụ Bootstrap Nav, Tab, Pill
  • Hướng dẫn và ví dụ Bootstrap NavBar
  • Hướng dẫn và ví dụ Bootstrap Table
  • Hướng dẫn và ví dụ Bootstrap Modal
  • Hướng dẫn và ví dụ Bootstrap Form
  • Hướng dẫn và ví dụ Bootstrap Pagination
  • Hướng dẫn và ví dụ Bootstrap Badge
  • Hướng dẫn và ví dụ Bootstrap Input Group
  • Hướng dẫn và ví dụ Bootstrap List Group
  • Hướng dẫn và ví dụ Bootstrap ProgressBar
  • Hướng dẫn và ví dụ Bootstrap Collapse và Accordion
  • Hướng dẫn và ví dụ Bootstrap Scrollspy
  • Hướng dẫn và ví dụ Bootstrap Breadcrumb
  • Hướng dẫn và ví dụ Bootstrap Carousel
  • Hướng dẫn và ví dụ tiện ích Bootstrap Spacing
  • Hướng dẫn và ví dụ tiện ích Bootstrap Border
  • Hướng dẫn và ví dụ tiện ích Bootstrap Color
  • Hướng dẫn và ví dụ tiện ích Bootstrap Text
  • Hướng dẫn và ví dụ tiện ích Bootstrap Sizing
  • Hướng dẫn và ví dụ tiện ích Bootstrap Position
  • Hướng dẫn và ví dụ tiện ích Bootstrap Flex
  • Hướng dẫn và ví dụ tiện ích Bootstrap Display
  • Hướng dẫn và ví dụ tiện ích Bootstrap Visibility
  • Hướng dẫn và ví dụ tiện ích Bootstrap Embed
Show More
  • Các hướng dẫn HTML
  • Các hướng dẫn CSS

Các bài viết mới nhất

  • Dart Stream Single và Broadcast
  • Xử lý lỗi trong Dart Stream
  • Hướng dẫn và ví dụ Dart Stream
  • So sánh đối tượng trong Dart với thư viện Equatable
  • Flutter BloC cho người mới bắt đầu
  • Xử lý lỗi 404 trong Flutter GetX
  • Ví dụ đăng nhập và đăng xuất với Flutter Getx
  • Hướng dẫn và ví dụ Flutter NumberTextInputFormatter
  • Hướng dẫn và ví dụ Flutter multi_dropdown
  • Hướng dẫn và ví dụ Flutter flutter_form_builder
  • Hướng dẫn và ví dụ Flutter GetX obs Obx
  • Hướng dẫn và ví dụ Flutter GetX GetBuilder
  • Từ khoá part và part of trong Dart
  • Hướng dẫn và ví dụ Flutter InkWell
  • Hướng dẫn và ví dụ Flutter Radio
  • Bài thực hành Flutter SharedPreferences
  • Hướng dẫn và ví dụ Flutter Slider
  • Hướng dẫn và ví dụ Flutter SkeletonLoader
  • Chỉ định cổng cố định cho Flutter Web trên Android Studio
  • Tạo Module trong Flutter
Show More
  • Các hướng dẫn Bootstrap

Từ khóa » Sử Dụng Bootstrap để Chuyển Banner Tĩnh Thành Dạng Slideshow