ការបង្កើត Carousel ជាមួយនឹង Bootstrap

យើងបានដឹងហើយថា Bootstrap គឺជាបណ្ណាល័យ (Library) របស់ Cascading Style Sheet (CSS) ដែលគេប្រើសំរាប់រចនាគេហទំព័រ រីឯ Carousel វាគឺជាកម្មវិធីជំនួយ (Plugin) មួយនៅក្នុង Bootstrap ដែលគេប្រើសំរាប់បង្កើតជាស្លាយ (Slide) មានលក្ខណៈវិលជុំ មានន័យថានៅពេលវាបង្ហាញដល់ស្លាយទីចុងក្រោយ វានឹងបង្ហាញស្លាយដំបូងហើយវាធ្វើដដែលៗរបៀបនេះរហូត ។

TechFree សូមបង្ហាញនូវការប្រើប្រាស់ Bootstrap និង Carousel ប៉ុន្តែមុននឹងប្រើប្រាស់យើងត្រូវធ្វើការទាញយក (Download) Bootstrap ជាមុនសិន ឬក៏អាចប្រើផ្ទាល់ពីអុីនធឺណិត (Internet) តែម្ដងដោយមិនចាំបាច់ទាញយក។ សូម ចុចទីនេះ ដើម្បីមើលការណែនាំនិងទាញយក Bootstrap មកប្រើប្រាស់ ។

១) ការប្រើប្រាស់ Bootstrap

ដើម្បីប្រើប្រាស់ Bootstrap បានសូមមើលរួបខាងក្រោម ៖

បន្ទាត់ទី 7 គឺយើងហៅ Bootstrap នៅក្នុងកន្លែងផ្ទុកថតឯកសារ (folder)
បន្ទាត់ទី 8 គឺយើងហៅ Bootstrap ផ្ទាល់ពីអុីនធឺណិត

*** ចំណាំ : យើងអាចប្រើប្រាស់មួយណាក៏បាន ប៉ុន្តែបន្ទាត់ទី 8 ប្រើបានតែពេលមានអុីនធឺណិត

២) ការប្រើប្រាស់ Carousel

បន្ទាប់ពីការហៅ Bootstrap មកប្រើរួចរាល់ហើយយើងចូលមកកាន់ការប្រើប្រាស់ Carousel វិញម្ដង។ យើងខ្ញុំសូមណែនាំពីការហៅ Class និង Id របស់ Carousel នៅក្នុង Bootstrap ។

class = “container” សំរាប់ក្ដោបនៅលើផ្ទាំង (Slide) ទាំងមូល
id =“myCarousel” សំរាប់ការគ្រប់គ្រងរបស់ Carousel ទៅលើមុខងារនៃផ្ទាំងដែលយើងចង់បង្ហាញ
class=“carousel slide” សំរាប់បញ្ជាក់ <div> ដែលផ្ទុក Carousel និងការបន្ថែមចលនាទៅលើ slide
data-ride=“carousel” ជាលក្ខណៈមួយរបស់ Bootstrap ដើម្បីចាប់ផ្តើមចលនា Carousel ភ្លាមនៅពេលបើកទំព័រ (load page)
class=“carousel-indicators” សំរាប់បង្ហាញទិន្នន័យដែលត្រូវបានផ្ទុកនៅក្នុង <ol></ol>
data-target=“#myCarousel” គឺជាចំនុចដែលត្រូវផ្ដល់ទៅឲ្យ id=“myCarousel”ជាអ្នកគ្រប់គ្រង
data-slide-to សំរាប់មើលរូបភាពណាមួយនៅពេលយើងចុចទៅលើចំនុចមូលៗនៅលើផ្ទាំង Slide
class=“active” សំរាប់បង្ហាញបញ្ជាក់នៅពេលបើកផ្ទាំងទីមួយនៅលើប៊ូតុងដែលនៅលើផ្ទាំង Slide
class=“carousel-inner” សំរាប់ផ្ទុកនូវរូបភាពទាំងអស់
class=“item” សំរាប់បញ្ជាក់និងផ្ទុកផ្ទាំងរូបភាពដែលយើងចង់ដាក់បង្ហាញ