របៀបបង្កើត Carousel

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

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

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

siema

HTML

html

Javascript

script

ជម្រើស

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

option

  • 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 បន្ទាប់ និង មុន។

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

carousel_001