កូដ Slider ដាក់ជា​វីដេអូ និង​រូបភាព​ចូលគ្នា​បាន

ត្រឡប់មកវិញម្ដងទៀត ខ្ញុំនឹងចែករំលែកនូវការណែនាំអំពីមីនីស្លាយឌឺ (mini slider) ដែលអាចប្រើបានទាំងវីដេអូ និងរូបភាព។ ស្លាយឌឺនេះមានមុខងារដូចស្លាយឌឺទូទៅដែរ គ្រាន់តែថាវាស្រាលខ្លាំង ហើយប្រើ jQuery បន្តិចបន្តួចប៉ុណ្ណោះ។

ស្លាយឌឺនេះស្រាលក៏ព្រោះតែវាពឹងផ្អែកតែលើការចុចប៊ូតុងឆ្វេង និងស្តាំ ហើយធ្វើចលនាដោយប្រើវិធីសាស្ត្ររំកិល (scroll)។ នោះហើយជាមូលហេតុដែលស្លាយឌឺនេះមានរបាររំកិល (scroll bar) នៅខាងក្រោម ដើម្បីងាយស្រួលដល់អ្នកចូលមើលក្នុងការជ្រើសរើសប្រើប៊ូតុង ឬប្រើការរំកិល។

វាមានទម្ងន់ស្រាល ប៉ុន្តែនៅតែងាយស្រួលប្រើនៅលើទម្រង់ Responsive ព្រោះវាអាចអូសទៅឆ្វេង ឬស្ដាំបានដោយមិនចាំបាច់ចុចប៊ូតុងព្រួញ។ ទំហំរូបភាពដែលអាចដាក់បានក៏មានច្រើនបែប ទោះផ្ដេក ឬបញ្ឈរក៏គ្មានបញ្ហាដែរ។

ការដាក់វីដេអូ និងរូបភាពក្នុងស្លាយឌឺតែមួយ? គ្មានបញ្ហាទេ អ្វីៗដំណើរការយ៉ាងរលូននៅលើមីនីស្លាយឌឺនេះ។ (និយាយអញ្ចឹង វីដេអូ និងរូបភាពនៅក្នុងអត្ថបទនេះមិនមែនជាការផ្សាយពាណិជ្ជកម្មទេ គ្រាន់តែជាឧទាហរណ៍ប៉ុណ្ណោះ)។

សូមចំណាំថា យ៉ាងហោចណាស់អ្នកគួរស្គាល់ Tag បើក និង Tag បិទ នៅក្នុង HTML ហើយព្យាយាមកុំចម្លងអត្ថបទពី Microsoft Word ឬគេហទំព័រផ្សេងទៀត។

---

---

សូមអនុវត្តតាមការណែនាំខាងក្រោមនេះ ដើម្បីដំឡើង Mini Slider នៅលើអត្ថបទប្លុករបស់អ្នក៖

1- ចូលទៅកាន់ Blogger >> Theme >> Edit HTML

2- ដាក់កូដ CSS Style ខាងក្រោមនេះ ដាក់​ពីលើកូដ ]]></b:skin>

កូដ CSS

/* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}

3- ដាក់ Script ខាងក្រោមនេះពីលើកូដ </body>

កូដ JavaScript

<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>
</script>

4- រក្សាទុក Theme (Template)។

5- បន្ទាប់មក សូមចូលទៅកាន់ Edit Post >> Mode HTML (ទម្រង់ HTML) >> ដាក់កូដខាងក្រោមនេះនៅកន្លែងដែលអ្នកចង់បាន។

កូដ HTML

<div class="slide-wrap">
<div class="blanter-wrap">
<ul>
<li>
<a class="youtube-iframe" href="javascript:void(0)">
<iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/03qDL0Xp2Lw?rel=0&amp;showinfo=1"></iframe>
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivR4czQPTKryhPWIjG6j_z4Kmw20atWHnira8uEahX__wkO5zEbZWxPS9656edgXJkF8QRVxNRomDcKgBqP14GM2wD2anE_wrLkWmsQ-q2AvWhg7JQ3tRGuAQs7nSjfaVx_sFw23W4OT0/s1600/RoC.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI3pZCkL9_aOJICM23grc8WbVo6bL_VnwNi98wY2XtyVPQgzmTfl5vHOHw8Tdj7X-MhstBonsSm7aOnWGGwJHUexKWsSeLAlK8g65AbZHP8qT-RHR9dc8DyKQK8iQ9oevK5SFExWl8GiY/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1ZnAIberYxu4ITquzpI17Klw_AxrNtrCzgeWNy-j3HBE-B8zXCfMRjN-LTEVhDb44FseOQqCuMYOa1WfAkWFMyaGAWR2enDdhA6baqHOjC3QhT7FGJ4-ERoKwMPifBawqw9J0aYxh_o/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBfo_CfK3PgQeSzxVOFJ475wv3ECpXz-Vzb-6uGSaQeL_04RfCmlx55MuNHJbRgRenkZqjNDga4D-p7CX5cEMOgdZRnrVne00OZEgOQ8ksAWx6MjalWDcCemPO2nbUKw9daIOA_wr4Wo/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj63MSrv49vKAzZ89RBcbQK4YV78U-cBo09GL3b6x3fPrwkWb2rko3c-phbXp4iRgsFnOwxzbrLosnSqU34eti3d4xb5fhnAPAAVBWkVUJHuX3AUHHGr62eB1R43dbuDCRQpvyAGHhimqA/s1600/RoC5.jpg" title="Judul Gambar" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>

6- រក្សាទុក។

សូមពិនិត្យមើលវីដេអូខាងក្រោមសម្រាប់ការណែនាំ៖

នេះគឺជាការណែនាំអំពីរបៀបបង្កើត Mini Slider ស្រាល និង Responsive នៅក្នុងអត្ថបទប្លុក។ កុំភ្លេចបញ្ចេញមតិ (Comment) និងចែកចាយ​ប្លុកនេះ ដើម្បីទទួលបានព័ត៌មានថ្មីៗពីប្លុកនេះ។

ប្រភពពី idblanter.com