Đệm Bông Ép

Kết quả 1 đến 2 của 2

Chủ đề: Cách sử dụng jQuery Carousel

  1. #1
    Thành Viên Mới
    Ngày tham gia
    Jan 2015
    Bài viết
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cách sử dụng jQuery Carousel

    joomla k2 carousel xin giới thiệu cách sử dụng jQuery Carousle. 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:
    Mã nguồn HTML:
    https://gist.githubusercontent.com/barryvdh/6155151/raw/cd4b31a559dee5d67e91cdd3eea60ec7e9ad3c79/carousel.js.[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]


    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).

    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:
    Mã nguồn HTML:
    <script src="js/bootstrap.min.js" type="text/javascript"> </script><style type="text/css>      @import url("bootstrap/css/bootstrap.min.css");</style>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Bước 2: ta có một mã HTML như sau:
    Mã nguồn HTML:
    <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>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    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”
    Mã nguồn HTML:
    <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>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    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:
    Mã nguồn HTML:
    <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>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Class .data-slide nhận 2 từ “prev” hoặc “next” để thay đổi vị trí trượt hiện tại của nó.

  2. #2
    Thành Viên Mới
    Ngày tham gia
    Dec 2014
    Bài viết
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Trước đây để tạo 1 slider như thế này phải viết code js rất mệt, giờ có thư viện sẵn thế này rồi tiện thật, mà lại cho các coder vào 1 khuôn khổ. rất hay!

Các Chủ đề tương tự

  1. TQ Hướng dẫn sử dụng lazy load của jquery
    Bởi xuanha trong diễn đàn Website - Phần Mềm
    Trả lời: 1
    Tin đăng cuối: 01-25-2015, 07:32 PM

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •