របៀបបង្កើត Carousel

• techfree


• 19 Dec 2016

Siema.js គឺ កម្មវិធីជំនួយ javascript មួយដែលសំរាប់ប្រើទាញអូសជាលក្ខណៈ slide។ ហើយជាពិសេសវា គឺជាកូដបើកចំហ (Open Source) ។ យើងអាចទាញយកប្រភពកូដពី Siema from Github ។

របៀបដើម្បីប្រើប្រាស់

ជាដំបូងអ្នកត្រូវផ្ទុក siema.js នេះក្នុងទំព័របណ្តាញ(webpage)។

HTML

Javascript

ជម្រើស

Siema ភ្ជាប់មកជាមួយការកំណត់ ជម្រើស (option) មួយចំនួនដែលអ្នកអាចផ្លាស់ប្តូរដោយឆ្លងកាត់ object មួយជា argument។ តាមតម្លៃលំនាំដើមគឺត្រូវបានបង្ហាញដូចខាងក្រោម។

• selector (string ឬ ធាតុរបស់ DOM) បញ្ជាក់ពីជ្រើសរើស។
• duration (ចំនួន(number)) រយៈពេលដំណើរការផ្លាស់ប្ដូរ slide (នៅក្នុង ms)។
• easing (ខ្សែអក្សរ) ដូចគ្នានឹងការផ្លាស់ប្តូរពេលវេលាមុខងារនៅក្នុង CSS។
• perPage (ចំនួន) ចំនួន slide ដែលត្រូវបង្ហាញ។
• startIndex (ចំនួន) index នៃការចាប់ផ្តើម slide  (zero-based)។
• draggable (boolean) អូសរូបភាពដោយ mouse pointer បាន។
• threshold (ចំនួន) ការប៉ះនិងកម្រិតចាប់ផ្ដើមអូស  (នៅក្នុងភិចសែល(in px))។
• loop (boolean) រង្វិលជុំ slide។

API

ដូចបានរៀបរាប់ខាងលើ Siema មិនមាន option ច្រើនប៉ុន្មានទេ តែមាន Method មានប្រយោជន៍មួយចំនួន៖

• next() ទៅកាន់ slide បន្ទាប់
• prev() ទៅកាន់ slide មុន
• goTo(index) ទៅ slide ជាក់លាក់ណាមួយ
• currentSlide index នៃ slide  សកម្មបច្ចុប្បន្ន (បានតែអាន(read only))

Carousel ដែលជាមូលដ្ឋានដែលមាន button បន្ទាប់ និង មុន។

យើងនឹងបានលទ្ទផលដូចខាងក្រោម