Tạo slide với CSS3 Perspective Carousel

Mình đã có giới thiệu nhiều plugin giúp bạn tạo slide đẹp cho blog, bài viết này mình lại hướng dẫn cho bạn cách tạo slide với CSS3 Perspective Carousel, plugin này cho phép bạn tạo slide theo kiểu 3D, với hình ảnh xếp chồng lên nhau.

Để hiểu rõ hơn về cách hoạt động của plugin này thì bạn có thể ghé sang xem ví dụ mình đăng trên Học WordPress trước nhé, vì lý do dung tốc độ tải trang chậm nên mình chỉ đính kèm 3 hình ảnh trong slide.

Demo

Cách sử dụng plugin này cũng đơn giản, đầu tiên thì bạn phải load các tập tin css và javascript trong thư viện cũng như các plugin liên quan để cho slide hoạt động.

<!-- Required CSS for the Carousel lib -->
<link href="/path/to/carousel.min.css" rel="stylesheet" type="text/css" media="all">

Tiếp đến là bạn load thư viện jQuery và thư viện javascript của CSS3 Perspective Carousel:

<!--[if lt IE 9]>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<![endif]-->
<script src="../build/carousel.min.js"></script>

Tiếp đến là bạn tạo nội dung bằng HTML hoặc PHP:

<div class="carousel">
    <ul class="carousel-wrapper">
        <li class="carousel-box">
            <img src="/path/to/img" alt="CSS3 Perspective Carousel">
        </li>
        <li class="carousel-box">
            <img src="/path/to/img" alt="CSS3 Perspective Carousel">
        </li>
        <li class="carousel-box">
            <img src="/path/to/img" alt="CSS3 Perspective Carousel">
        </li>
    </ul>
</div>

Cuối cùng là bạn gọi hàm carousel để slide hoạt động:

<!-- Loading and initialize the Carousel lib -->
<script src="/path/to/carousel.min.js"></script>
<script>
    Carousel.init({
        target: $('.carousel')
    });
</script>

Bạn có thể sang trang ví dụ để tải về gói mã nguồn và demo đính kèm, plugin này là hoàn toàn miễn phí, do vậy chức năng của nó còn hạn chế, bạn có thể chỉnh sửa nâng cấp thêm để sử dụng cho phù hợp với nội dung website của bạn.

Lại Đình Cường