Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cách sử dụng jQuery Carousel

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi springriver, 3/3/15.

Lượt xem: 4,002

  1. springriver Thành viên cấp 1

    Carousel là một plugin của jQuery giúp chuyển đổi bất kỳ phần tử HTML nào thành dạng lặp quay vòng. Plugin này được tích hợp sẵn trong boostrap.js hoặc là một file .js riêng lẻ bạn có thể download tại:
    
    https://gist.githubusercontent.com/barryvdh/6155151/raw/cd4b31a559dee5d67e91cdd3eea60ec7e9ad3c79/carousel.js.
    
    
    Nhưng tốt nhất bạn nên dùng file bootstrap.js vì nó nhiều tính năng hơn, và nó có sẵn cả CSS rồi, ta không cần viết thêm nữa.

    Chú ý: Carousel không được hỗ trợ từ IE 9 trở xuống( bởi vì nó sử dụng hiệu ứng transition và animations của CSS3 trong slide).
    [​IMG]
    Bắt đầu tạo 1 site dùng Carousel.

    Bước 1: thêm file carousel.js và file bootstrap.min.css vào site:
    
    <script src="js/bootstrap.min.js" type="text/javascript"> </script>
    <style type="text/css>
    @import url("bootstrap/css/bootstrap.min.css");
    </style>
    
    Bước 2: ta có một mã HTML như sau:
    
    <div id="wrapper_carousel" class="
    	
    carousel slide" data-ride="
    	
    carousel">
    
    <div class="carousel-inner" role="listbox">
    
    <div class="item active">
    
    <img src="image/1.jpg" alt="Chania">
    
    </div>
    
    ...............................................
    
    <div class="item">
    
    <img src="image/4.jpg" alt="Flower">
    
    </div>
    
    </div>
    
    </div>
    
    
    Là ta đã có 1 trang web có slide chạy theo kiểu carousel rồi đó.

    Giải thích cấu trúc ở trên:

    Carousel yêu cầu phải có 1 id( ở đây là id=”wrapper_carousel”) để điều khiển các hàm thuộc tính, tên id là gì thì tùy bạn.

    class=”carousel slide” là một quy định của thẻ div có chứa carosel, nó làm cho slide có hiệu ứng trượt ảnh mượt mà.

    Thuộc tính data-ride=”carousel” báo với Bootstrap bắt đầu hiệu ứng chuyển động của carousel ngay khi trang web được load. Nếu không có thuộc tính này, carousel sẽ không có hiệu ứng chuyển động.

    Slide quy định trong một thẻ div với class .caroudel-inner.

    Mỗi thành phần của slide được nằm trong thẻ div với class là .item, có thể là text hoặc ảnh.

    Class .active để quy định thành phần nào là bắt đầu của slide, class này là cần thiết.

    Chỉ với mã HTML ở trên, thì carousel nó tự chạy, ta chưa điều khiển được nó nên chưa pro lắm. Bây giờ ta sẽ thêm cho nó 2 phần điều khiển là: chỉ số để chọn, 2 nút next và pre.

    Để thêm nút chỉ số, ta thêm đoạn mã sau dưới dòng div id=”wrapper_carousel”
    
    <ol class="carousel-indicators">
    
    <li data-target="#wrapper_carousel" data-slide-to="0" class="active"></li>
    
    <li data-target="#wrapper_carousel" data-slide-to="1"></li>
    
    <li data-target="#wrapper_carousel" data-slide-to="2"></li>
    
    <li data-target="#wrapper_carousel" data-slide-to="3"></li>
    
    </ol>
    
    
    Nút chỉ số là các chấm nhỏ ở dưới cùng mỗi slide để cho ta biết có bao nhiêu slide trong carousel( mỗi slide là một dấu chấm) và slide hiện tại đang xem nằm ở vị trí nào. Chỉ số là một danh sách sắp xếp với class .carousel-indicators

    Class .data-target trỏ đến id của Carousel

    Class .data-slide-to quy định khi click vào nút này thì slide nào sẽ chạy đến.

    Bây giờ ta thêm nút next và pre bằng đoạn HTML sau:
    
    <a class="left carousel-control" href="#wrapper_carousel" role="button" data-slide="prev">
    
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    
    <span class="sr-only">Previous</span>
    
    </a>
    
    <a class="right carousel-control" href="#wrapper_carousel" role="button" data-slide="next">
    
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    
    <span class="sr-only">Next</span>
    
    </a>
    
    
    Class .data-slide nhận 2 từ “prev” hoặc “next” để thay đổi vị trí trượt hiện tại của nó.

    ...
    Phạm Hữu DưKuHit thích bài viết này.

Ủng hộ diễn đàn