Với một loạt các Carousels ra khỏi đó, nhiều người cho Mootools là tốt, tôi vẫn quyết định viết Lớp Carousel của riêng tôi, đối với một số lý do tốt
1. Muốn một tính năng phân trang (có thể nhảy một slide đặc biệt / bước trong carousel).
2. Wanted tự do với vị trí của các nút LEFT, RIGHT / liên kết, nơi đã bao giờ tôi vui lòng.
3. Kiểm soát các bước trượt.
Tôi đã quản lý để tạo ra một Carousel mới, với các tính năng trên ... như dưới đây ... Hãy đề nghị bất kỳ sửa đổi bạn sẽ yêu cầu!!!
Ví dụ của tôi trông như thế này ... [ Xem Demo ]
Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 2.006 lần)
1. Carousel Paging
Bạn có thể dễ dàng thêm các phân trang carousel của bạn, chỉ đơn giản bằng cách thiết lập lá cờ phân trang, mà là mới parater trôi qua trong khi tạo thể hiện của các MooCarousel đúng sự thật (muốn phân trang) hoặc sai (donot muốn phân trang).
carousel1 var = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true); / / ns = số ảnh, sss = trượt kích thước bước
Và ofcourse bạn có thể thay đổi giao diện-n-cảm nhận của những achors phân trang như bạn vui lòng bằng cách thay đổi CSS của họ.
Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging hiện tại, trang carousel_paging {outline: none; chiều rộng:.. 15px; chiều cao: 15px; line-height: 15px; text-align: center; màn hình hiển thị: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
Carousel_paging 1: hover, carousel_paging hiện tại {background: # 4D4D9B; color: # ffffff;}.
Vâng! có một vấn đề nhỏ, mặc dù neo phân trang nếu đặt, sau đó nó sẽ được tạo ra luôn luôn sau khi các thành phần Carousel. Tôi muốn làm cho nó năng động, nhưng sau đó chỉ để giữ cho các Script thổi ra tỷ lệ, tôi quyết định bỏ qua nó.
Nhưng bạn biết Javascript, bạn có thể dễ dàng thay đổi mã thế hệ phân trang trong lớp MooCarousel để làm hài lòng nhu cầu của bạn.
2. Customising các biểu tượng phải & trái
Bạn có thể thay đổi ĐẶT, HÌNH ẢNH hoặc bất kỳ tài sản displat của các nút trái và bên phải chỉ đơn giản bằng cách chơi xung quanh với CSS. để có thể thay đổi vị trí của các buttoms trái và bên phải là lý do thực sự cho tôi để phải Lớp Carousel của chúng tôi.
Kể từ khi lớp MooCarousel này, chấp nhận id của các nút này, bạn thực sự có thể đặt các nút này bất cứ nơi nào trên trang web, nếu bạn xin vui lòng ... nó không phải là trong hệ thống phân cấp yếu tố, như trong ví dụ của tôi.
var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);
CSS
Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; vị trí: tương đối; width: 23px; chiều cao: 20px; float: left; con trỏ: con trỏ;}
Carousel_container_r {background-position: 0-38px;}.
Carousel_container_l {vị trí: 0-58px;}.
3. Customising bước trượt
TÔI CÓ NGHĨA LÀ BƯỚC SLIDE CUSTOMISING CỦA TÔI?
Hầu hết Carousels trượt đầy đủ với các cửa sổ có thể nhìn thấy. Vì vậy, nói rằng bạn đã có bốn mục (như trong mẫu của tôi ở trên), nó sẽ trượt tất cả bốn mục. Với phần Carousel, vượt qua số lượng các slide và kích thước các bước của sự lựa chọn của bạn.
var carousel1 = new MooCarousel (carousel1_wrapper ',' carousel1_items_container ',' carousel1_moveleft ',' carousel1_moveright, c_ns, c_sss, true);
c_ns = số của slide, c_sss = trượt kích thước bước
Ngoài ra, trong example1 của tôi, tôi đã calcuted kích thước bước trượt, dựa trên luận lý mà, tôi biết số hạng mục, chiều rộng trên mỗi mục và biên độ đã được đưa ra sau khi mỗi mục trong CSS của tôi.
/ * Đối với tiệc tùng 1 * /
var c1_w = 92; / / tiệc tùng khoản Rộng
var c1_n = 10; / / Tổng số khoản uống rượu say So sánh
var c1_pp = 4 / / Số perpage So sánh mục uống rượu say
var c1_marginFactor = 51;
var c1_sss = c1_w c1_pp; / / sss = slide kích thước bước
Các var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0,5); / / ns = số slide
c1_sss + = c1_marginFactor; / / sss = trượt bước kích thước, 51 cho lợi nhuận
Yêu cầu: Mootools 1,2
Xem Demo | Tải về Mootools Carousel Với 1,0 Phiên bản Paging (tải về 2.006 lần)
