ការបង្កើត 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 ប្រើបានតែពេលមានអុីនធឺណិត

bs1

២) ការប្រើប្រាស់ 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” សំរាប់បញ្ជាក់និងផ្ទុកផ្ទាំងរូបភាពដែលយើងចង់ដាក់បង្ហាញ

bs2

ខាងក្រោមនេះជារូបភាពជាមួយកូដនៃសញ្ញាឆ្វេង និង ស្ដាំដែលប្រើនៅក្នុង Carousel ។

  • class=”left carousel-control” ជាសញ្ញាដែលនៅខាងឆ្វេងនៃ Carousel
  • data-slide=”prev” សំរាប់ចូលមកកាន់ផ្ទាំងរូបភាពមុន
  • class=”right carousel-control” ជាសញ្ញាដែលនៅខាងស្ដាំនៃ Carousel
  • class=”next” សំរាប់ចូលទៅកាន់ផ្ទាំងរូបភាពបន្ទាប់

bs3

យើងអាចបន្ថែមកូដ CSS នៅក្នុង <head></head> សំរាប់តុបតែងនៅលើ Carousel របស់យើង ។

bs4

៣) លទ្ធផល

ក្រោយពីសរសេរ Code រួចរាល់មកយើងនឹងឃើញលទ្ធផលដូចខាងក្រោម៖

bs5

សូមចុចលើពាក្យ ស្វែងយល់បន្ថែម ដើម្បីយល់កាន់តែច្រើនអំពី Bootstrap និង Carousel ។ សូមអរគុណ!