ការបង្កើត 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” សំរាប់បញ្ជាក់និងផ្ទុកផ្ទាំងរូបភាពដែលយើងចង់ដាក់បង្ហាញ
ខាងក្រោមនេះជារូបភាពជាមួយកូដនៃសញ្ញាឆ្វេង និង ស្ដាំដែលប្រើនៅក្នុង Carousel ។
- class=”left carousel-control” ជាសញ្ញាដែលនៅខាងឆ្វេងនៃ Carousel
- data-slide=”prev” សំរាប់ចូលមកកាន់ផ្ទាំងរូបភាពមុន
- class=”right carousel-control” ជាសញ្ញាដែលនៅខាងស្ដាំនៃ Carousel
- class=”next” សំរាប់ចូលទៅកាន់ផ្ទាំងរូបភាពបន្ទាប់
យើងអាចបន្ថែមកូដ CSS នៅក្នុង <head></head> សំរាប់តុបតែងនៅលើ Carousel របស់យើង ។
៣) លទ្ធផល
ក្រោយពីសរសេរ Code រួចរាល់មកយើងនឹងឃើញលទ្ធផលដូចខាងក្រោម៖
សូមចុចលើពាក្យ ស្វែងយល់បន្ថែម ដើម្បីយល់កាន់តែច្រើនអំពី Bootstrap និង Carousel ។ សូមអរគុណ!