Dengan berbagai Carousels luar sana, banyak Mootools juga, saya masih memutuskan untuk menulis Kelas Carousel saya sendiri, untuk beberapa alasan yang baik
1. Dicari fitur paging (untuk dapat melompat slide tertentu / langkah dalam korsel).
2. Dicari kebebasan dengan penempatan tombol KIRI dan KANAN / link, di mana pun aku suka.
3. Lebih kontrol atas Langkah Slide.
Aku berhasil membuat Carousel baru, dengan fitur di atas ... seperti di bawah ini ... Jangan ragu untuk menyarankan modifikasi yang anda akan membutuhkan!
Contoh saya terlihat seperti ini ... [ View Demo ]
Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1980 kali)
1. Carousel Pager
Anda dapat dengan mudah menambahkan paging untuk korsel Anda, cukup dengan menetapkan bendera paging, yang parater terakhir lewat sekaligus menciptakan instance dari MooCarousel ke true (ingin paging) atau false (donot ingin paging).
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = jumlah slide, sss = geser ukuran langkah
Dan ofcourse Anda dapat mengubah tampilan-n-merasa ini achors paging sesukamu dengan memodifikasi CSS mereka.
Carousel_paging {text-align: right; margin: 5px 10px 0 0;}.
Carousel_paging saat ini, carousel_paging halaman {outline: none; width:.... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 1px 0 0; text-decoration: none;}
Carousel_paging a: hover, carousel_paging saat ini {background: # 4D4D9B; color: # ffffff;}...
Nah! ada masalah kecil sekalipun, Jangkar paging jika diatur, maka akan mendapatkan dihasilkan selalu setelah komponen Carousel. Aku ingin membuatnya dinamis juga, tetapi kemudian hanya untuk menjaga Script untuk meniup keluar dari proporsi, saya memutuskan untuk melewati itu.
Tapi Anda tahu Javascript sedikit, Anda dapat dengan mudah memodifikasi kode generasi paging di kelas MooCarousel untuk menyenangkan kebutuhan Anda.
2. Menyesuaikan Ikon Kiri & Kanan
Anda dapat mengubah PENEMPATAN, GAMBAR atau properti displat dari Tombol Kiri dan Kanan hanya dengan bermain-main dengan CSS. untuk dapat mengubah penempatan dari buttoms Kiri dan Kanan adalah alasan sebenarnya bagi saya untuk Kelas hak kita Carousel saya.
Karena ini Kelas MooCarousel, menerima id itu tombol ini, Anda sebenarnya dapat menempatkan tombol-tombol mana saja di halaman, jika Anda silahkan ... tidak harus dalam hirarki elemen, seperti dalam contoh saya.
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; position: relative; width: 23px; height: 20px; float: left; kursor: pointer;}
Carousel_container_r {background-position: 0-38px;}.
Carousel_container_l {background-position: 0-58px;}.
3. Menyesuaikan Langkah Slide
APA SAYA BERARTI LANGKAH Menyesuaikan SAYA SLIDE?
Carousels paling geser penuh dengan dari jendela terlihat. Jadi katakanlah Anda memiliki empat item (seperti dalam contoh saya di atas), akan geser semua empat item. Dengan Komponen Carousel, Anda melewati jumlah slide dan ukuran langkah pilihan Anda.
var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = jumlah slide, c_sss = geser ukuran langkah
Juga, dalam example1 saya, saya telah calcuted ukuran langkah slide, berdasarkan logika mana, aku tahu jumlah item, lebar pada setiap item dan margin yang diberikan setelah setiap item dalam CSS saya.
/ * Untuk korsel 1 * /
var c1_w = 92; Lebar / / korsel Barang
var c1_n = 10; Nomor / / Total Items korsel Perbandingan
var c1_pp = 4 / / Jumlah perpage Perbandingan Produk korsel
var c1_marginFactor = 51;
var c1_sss = c1_w * c1_pp; / / sss = geser ukuran langkah
var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + .5); / / ns = jumlah slide
c1_sss + = c1_marginFactor; / / sss = geser ukuran langkah, 51 untuk margin
Persyaratan: Mootools 1,2
Lihat Demo | Unduh Mootools Carousel Dengan Pager Versi 1.0 (download 1980 kali)
