Bootstrap

Bootstrap Carousel

Posted on by ComdyVN

Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.

Carousel còn được gọi là trình chiếu hoặc thanh trượt hình ảnh là một số cách tốt nhất để hiển thị số lượng lớn nội dung trong một không gian nhỏ trên các trang web. Đây là một bản trình bày động về nội dung trong đó văn bản và hình ảnh được hiển thị hoặc có thể truy cập được đối với người dùng bằng cách xoay vòng qua các phần tử.

Ví dụ sau đây sẽ chỉ cho bạn cách tạo carousel hoặc trình chiếu đơn giản với các điều khiển và chỉ báo trước / sau bằng cách sử dụng plugin Bootstrap carousel.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo Carousel với Bootstrap

Tạo carousel với phụ đề

Bạn cũng có thể thêm chú thích vào các trang của carousel một cách dễ dàng với phần tử .carousel-caption bên trong bất kỳ phần tử .carousel-item. Bạn có thể tùy chọn sử dụng các lớp tiện ích hiển thị để ẩn chú thích trên các khung nhìn nhỏ hơn.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some placeholder content for the first slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
                <h5>Second slide label</h5>
                <p>Some placeholder content for the second slide.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
                <h5>Third slide label</h5>
                <p>Some placeholder content for the third slide.</p>
            </div>
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo carousel với phụ đề

Mẹo: Các lớp .d-none và .d-md-block trên các phần tử .carousel-caption trong ví dụ trên làm cho phụ đề của carousel hiển thị trên các thiết bị trung bình (tức là chiều rộng khung nhìn ≥768px), nhưng ẩn chúng trên các thiết bị có khung nhìn nhỏ hơn.

Ngoài ra, bạn có thể thêm .carousel-dark vào .carousel để tạo các điều khiển, chỉ báo và chú thích tối hơn trong trường hợp các trang trình bày của bạn có màu nhạt hơn. Hãy xem một ví dụ:

<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1-light.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2-light.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3-light.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Tạo phiên bản màu tối của carousel

Bạn cũng có thể thêm chú thích như tiêu đề hoặc văn bản mô tả vào các trang trình bày riêng lẻ của carousel, vui lòng xem ví dụ tiếp theo trong phần sau.

Với Bootstrap, bạn có thể tạo carousel rất dễ dàng thông qua các thuộc tính data mà không cần viết dòng mã JavaScript nào. Hãy xem ví dụ sau:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>

    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="images/slide1.png" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="images/slide2.png" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="images/slide3.png" class="d-block w-100" alt="Slide 3">
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

Bạn có thể tự hỏi mã này là gì. Chà, chúng ta hãy lần lượt xem qua từng phần của mã ví dụ carousel này để hiểu rõ hơn.

Giải thích mã

Bootstrap carousel thường có ba thành phần – phân trang carousel (hình chữ nhật nhỏ), điều khiển carousel (mũi tên trước và sau) và các mục hoặc trang trình bày của carousel.

  • Vùng chứa ngoài cùng của mọi carousel (tức là phần tử .carousel) yêu cầu một mã id duy nhất (trong trường hợp của chúng tôi id="myCarousel") để nó có thể được nhắm mục tiêu bởi các phân trang carousel (dòng số 4, 5, 6) và các điều khiển carousel (dòng số 23, 26) để hoạt động bình thường.
  • Thuộc tính data-bs-ride="carousel" của phần tử .carousel yêu cầu Bootstrap bắt đầu tạo hiệu ứng băng chuyền ngay lập tức khi tải trang.
  • Thuộc tính data-bs-slide-to (dòng số 4, 5, 6) di chuyển vị trí trang trình bày đến một mục cụ thể (chỉ mục bắt đầu bằng 0) khi nhấp vào phân trang carousel cụ thể.
  • Các trang trình bày được chỉ định trong .carousel-inner (dòng số 10) và nội dung của mỗi trang trình bày được xác định trong phần tử .carousel-item có thể là văn bản và hình ảnh.
  • Thuộc tính data-bs-slide trên điều khiển băng chuyền (dòng số 23, 26) chấp nhận các từ khóa prev hoặc next, làm thay đổi vị trí trang trình bày so với vị trí hiện tại của nó.

Phần còn lại của vấn đề là tự giải thích, ví dụ: phần tử .carousel định nghĩa Bootstrap carousel, phần tử .carousel-indicators cho biết có bao nhiêu trang trình bày trong carousel và trang trình bày nào hiện đang hoạt động, phần tử .carousel-control-prev, .carousel-control-next định nghĩa các điều khiển trước đó và tiếp theo để di chuyển giữa các trang trình bày carousel.

Mẹo: Bắt buộc phải thêm lớp .active vào một trong các trang trình bày carousel (tức là trên phần tử .carousel-item), nếu không phần tử sẽ không hiển thị.

Lưu ý: Lớp .slide trên phần tử .carousel thêm hiệu ứng chuyển tiếp trang trình bày CSS vào carousel để làm cho các mục trong carousel trượt khi hiển thị mục mới.

Bạn cũng có thể kích hoạt carousel theo cách thủ công bằng JavaScript – chỉ cần gọi phương thức carousel() với bộ chọn id hoặc class của phần tử trình bao bọc trong mã JavaScript của bạn.

<script>
$(document).ready(function(){
    $("#myCarousel").carousel();
});
</script>

Mẹo: Kích hoạt carousel theo cách thủ công qua JavaScript có thể hữu ích trong trường hợp bạn không muốn carousel của mình bắt đầu trượt khi tải trang.

Có một số tùy chọn nhất định có thể được truyền cho phương thức carousel() Bootstrap để tùy chỉnh chức năng của carousel. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.

Để đặt các tùy chọn thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs, chẳng hạn như data-bs-interval="3000", data-bs-pause="hover", v.v.

Tên Kiểu Mặc định Mô tả
interval number 5000 Chỉ định khoảng thời gian để trì hoãn (tính bằng mili giây) giữa trang trình bày này sang trang trình bày khác trong chế cycle. Nếu false, carousel sẽ không tự động quay vòng.
keyboard boolean true Chỉ định xem carousel có phản ứng với các sự kiện bàn phím hay không. Mặc định là true, đó có nghĩa là bạn có thể chuyển đến trang trình bày trước đó và tiếp theo của carousel bằng cách sử dụng các phím mũi tên trái và phải trên bàn phím.
pause string | boolean ‘hover’ Theo mặc định, tạm dừng quay vòng của carousel khi con trỏ chuột vào carousel và tiếp tục quay vòng khi con trỏ chuột rời khỏi carousel. Nếu được đặt thành false, di chuột qua carousel sẽ không tạm dừng.
ride string | boolean false Tự động phát carousel sau khi người dùng xoay vòng mục đầu tiên theo cách thủ công. Nếu được đặt thành 'carousel', sẽ tự động phát carousel khi tải.
wrap boolean true Chỉ định xem carousel sẽ quay vòng liên tục hay dừng ở trang trình bày cuối cùng.
touch boolean true Chỉ định xem carousel có hỗ trợ tương tác vuốt trái / phải trên thiết bị màn hình cảm ứng hay không.

Thuộc tính data cung cấp một cách dễ dàng để thiết lập các tùy chọn của carousel, tuy nhiên JavaScript là cách thích hợp hơn vì nó ngăn bạn khỏi công việc lặp đi lặp lại.

Đây là các phương thức chuẩn của Bootstrap Carousel:

Bạn có thể truyền các tùy chọn vào carousel bằng cách sử dụng đối tượng options.

Ví dụ sau sẽ tắt tính năng tự động trượt trong carousel. Theo mặc định, Bootstrap Carousel bắt đầu phát hoặc tự động trượt khi tải trang.

<script>
$(document).ready(function(){
    $("#myCarousel").carousel({
        interval: false
    });
});
</script>

Ví dụ sau sẽ ngăn carousel tự động trượt khi đã đến trang trình bày cuối cùng.

<script>
$(document).ready(function(){
    $("#myCarousel").carousel({
        wrap: false
    });
});
</script>

cycle

Phương thức này sẽ làm carousel bắt đầu di chuyển qua các mục từ trái sang phải.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("cycle");
    });
});
</script>

pause

Phương thức này ngăn carousel di chuyển qua các mục.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("pause");
    });
});
</script>

prev

Phương thức này di chuyển carousel đến mục trước đó.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("prev");
    });
});
</script>

next

Phương thức này di chuyển carousel đến mục tiếp theo.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("next");
    });
});
</script>

nextWhenVisible

Không di chuyển carousel sang trang tiếp theo khi trang không hiển thị hoặc carousel hoặc phần tử cha của nó không hiển thị.

<script>
$(document).ready(function(){
    $("#myCarousel").carousel("nextWhenVisible");
});
</script>

to

Phương thức này di chuyển carousel đến một trang trình bày cụ thể (bắt đầu bằng 0, tương tự như một mảng).

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myCarousel").carousel(2);
    });
});
</script>

dispose

Phương thức này hủy carousel của một phần tử (tức là xóa dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}

        $("#myCarousel").carousel("dispose");
        console.log(myCarousel);
        // {_element: null, _items: null, _interval: null, _activeElement: null, _isPaused: null, …}
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của carousel được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của carousel được liên kết với phần tử DOM hoặc tạo một instance mới trong trường hợp carousel không được khởi chạy.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myCarousel = bootstrap.Carousel.getOrCreateInstance($("#myCarousel")[0]);
        console.log(myCarousel);
        // {_element: div#myCarousel.carousel.slide, _items: Array(3), _interval: 9, _activeElement: div.carousel-item.active, _isPaused: false, …}
    });
});
</script>

Lớp carousel của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng của carousel.

Sự kiện Mô tả
slide.bs.carousel Sự kiện này kích hoạt ngay lập tức khi phương thức slide được gọi.
slid.bs.carousel Sự kiện này được kích hoạt khi carousel đã hoàn thành quá trình chuyển đổi trang chiếu của nó.

Ví dụ sau đây hiển thị thông báo cảnh báo khi quá trình chuyển đổi trượt của một mục carousel đã hoàn tất. Chúng ta hãy thử nó và xem nó thực sự hoạt động như thế nào.

<script>
$(document).ready(function(){
    $("#myCarousel").on("slid.bs.carousel", function(){
        alert("The sliding transition of previous carousel item has been fully completed.");
    }); 
});
</script>

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *