For Android device For iOS device
២២
មករា

គន្លឹះ​ខ្លះ​ៗ​ក្នុង​ការធ្វើ Slider ជាមួយ CSS និង Bootstrap

រៀបរៀងដោយ លោក សួ លីឡាយ

Hey សួស្តីអ្នក​ទាំងអស់​គ្នា​ជា​ពិសេស​អ្នក​ដែល​កំពុង​សិក្សា HTML & CSS ទាំងអស់​គ្នា ហើយនេះគឺ គន្លឹះ​ខ្លះ​ៗ​ក្នុង​ការធ្វើ Slider ជាមួយ CSS និង Bootstrap

​ដែល​ខ្ញុំ​លើកយកមក​បង្ហាញ​អ្នក​ទាំងអស់​គ្នា ។ តោះៗ​កុំ​ឲ្យ​ខាតពេលយូរយើងទៅមើល​លទ្ធផល និង Code ​ខាងក្រោម​ទាំងអស់​គ្នា ៖

​លទ្ធផល​កូដ

 ការពន្យល់កូដ HTML

- បន្ទាត់ទី ៨ ដល់ ១០ ជា Code ​សម្រាប់ Link ​ទៅកាន់ Bootstrap

- បន្ទាត់ទី ១៥ ដល់ ៥៦ គឺជា Code ​ដែល​យើង​បង្កើត Slider ហើយ ដើម្បី​បាន Code ទាំងនេះយើងត្រូវវាយ (bs3 + CTRL + Space រួចវាយពាក្យ Carousel) រួច Enter ។ វានឹង​ចេញ​ទម្រង់ Carousel នេះមក​ឲ្យ​យើង ។ បន្ទាប់មក​យើង​គ្រាន់តែ​ប្តូរ​រូបភាព អក្សរ ឬ ទំហំ Slide ជាការស្រាច់ ។

- បន្ទាត់ទី ១៧ ដល់ ១៩ គឺជាចំនួន slide ដែរយើងចង់​បង្ហាញ​បើយើងចង់បាន Slide ​ច្រើន​ជាងនេះយើងត្រូវ add វា​បន្ថែម​ទៀត

- ហើយ Class ​ដែល​មានពាក្យ active នៅបន្ទាត់ទី​១៩ គឺ​វានឹង​បង្ហាញ​មុនគេ ។

- បន្ទាត់ទី ២១ គឺជា Class ដែរវាក្ដោបលើ Slide ទី១ របស់យើង

- បន្ទាត់ទី ២៣ គឺជា រូបភាព Slide ទី១ របស់យើង

- បន្ទាត់ទី ២៦ ដល់ ២៧ គឺជា Caption របស់ Slide ទី១

- បន្ទាត់ទី ២៨ គឺជា button ​ដែល​យើងអាច link បានរបស់ Slide ទី១

- បន្ទាត់ទី ៥៤ គឺជា button ​នៅលើ Slide ​សម្រាប់ ត្រលប់ទៅ Slide មុន

- បន្ទាត់ទី ៥៤ គឺជា button ​នៅលើ Slide ​សម្រាប់ ទៅកាន់ Slide បន្ទាប់

 ការពន្យល់កូដ CSS

- បន្ទាត់ទី ៤ ដល់ ៧ គឺ​កំណត់​ប្រវែង​ចម្ងាយ និង ប្រវែង​កម្ពស់​ទៅ​ឲ្យ រូបភាព​ដែរស្ថិតនៅ​ក្នុង Class item

- បន្ទាត់ទី ៨ ដល់ ១២ គឺ​កំណត់ Font អក្សរ, ពណ៍ និង ស្រមោល​ទៅកាន់ h1 និង p ដែរស្ថិតនៅ​ក្នុង Class item

  Link Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css

/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

→ ​សម្រាប់ Link Download កម្មវិធី ANTLearner សម្រាប់ Android & Windows http://www.antclasses.com/help/page/download.html

→ ​សម្រាប់ Link Download កម្មវិធី​ផ្សេងទៀត​សម្រាប់ iOS & Android & Windows http://www.antclasses.com/help/page/application.html

→ ​ប្រសិនបើ​មានចង្ងល់ ឬ​មាន​សំណួរ​ផ្សេងៗ​សូម​ផ្ញើ​សារចូល Facebook : https://www.facebook.com/anttrainning

 ​សម្រាប់​វគ្គ​សិក្សា​នៅអាន-ANT http://training.antkh.com/ 

 លេខ​ទូរសព្ទ​ទំនាក់ទំនង ០១០/០១៦ ៦៦៦ ៦៥៣

💒 ទីតាំង #86B ផ្លូវ 313 កែង 606 សង្កាត់បឹងកក់២ ទួលគោក

https://maps.app.goo.gl/cdi3hTED27tbHBaB9

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា