របៀប​បន្ថែម​ស្លាយ​រូបភាព​ក្នុង Blogger ដោយប្រើ HTML, CSS & JS មាន២​ជម្រើស

ស្លាយរូបភាព (Image Slider) គឺជាវិធីដ៏ល្អមួយដើម្បីធ្វើឲ្យគេហទំព័រ Blogger របស់អ្នកមានភាពទាក់ទាញភ្នែក និងមានអន្តរកម្ម។ ទោះបីជាអ្នកចង់បង្ហាញរូបភាពច្រើន, បង្ហាញអត្ថបទពិសេសៗ, ឬបង្កើតគេហទំព័រដើមដែលគួរឱ្យចាប់អារម្មណ៍ក៏ដោយ ស្លាយរូបភាពអាចជួយបាន។

នៅក្នុងការណែនាំនេះ យើងនឹងបង្ហាញអ្នកពីជំហាននានាក្នុងការបន្ថែមស្លាយរូបភាពទៅកាន់គេហទំព័រ Blogger របស់អ្នក ដោយប្រើ HTML, CSS, និង JavaScript សាមញ្ញៗ។

• ចូលទៅកាន់ផ្នែក ប្លង់ (Layout)។
• ចុច បន្ថែមឧបករណ៍ (Add a Gadget) នៅក្នុងតំបន់ដែលអ្នកចង់បន្ថែមស្លាយ (ឧទាហរណ៍៖ ទំព័រដើមរបស់អ្នក)។
• ជ្រើសរើសយក HTML/JavaScript gadget។

ស្លាយរូបភាពទី១

ដំបូង អ្នកត្រូវ បង្ហោះ (Upload) រូបភាពទាំងអស់ដែលមានទំហំ និងសមាមាត្រ (aspect ratio) ដូចគ្នា ហើយ ចម្លង (Copy) យក URL ប្រភពរូបភាព (Image Source URLs) ទាំងអស់នោះដាក់ក្នុងឯកសារ notepad ណាមួយ។

ខាងក្រោមនេះគឺជាកូដដែលអ្នកត្រូវចម្លង និងបិទភ្ជាប់ទៅក្នុងឧបករណ៍ HTML/JavaScript។ សូមប្រាកដថាបាន ផ្លាស់ប្តូរ URLs រូបភាព នៅទីនេះ។ អ្នកក៏អាចបន្ថែម តំណ (Links) ទៅកាន់រូបភាពនីមួយៗផងដែរ ដូច្នេះវានឹងបើកទៅកាន់អត្ថបទដែលត្រូវគ្នា ឬតំណណាមួយដែលអ្នកបានកំណត់សម្រាប់រូបភាពទាំងនោះ។

កូដ

<div class="wrapper">
    <button id="left" class="arrow prev" aria-label="Previous">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="#343F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
    <div class="carousel">
        <a href="https://example.com/link1" target="_blank">
            <img src="https://images.pexels.com/photos/3561009/pexels-photo-3561009.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 1" draggable="false">
        </a>
        <a href="https://example.com/link2" target="_blank">
            <img src="https://images.pexels.com/photos/4348404/pexels-photo-4348404.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 2" draggable="false">
        </a>
        <a href="https://example.com/link3" target="_blank">
            <img src="https://images.pexels.com/photos/933255/pexels-photo-933255.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 3" draggable="false">
        </a>
        <a href="https://example.com/link4" target="_blank">
            <img src="https://images.pexels.com/photos/123335/pexels-photo-123335.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 4" draggable="false">
        </a>
    </div>
    <button id="right" class="arrow next" aria-label="Next">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="#343F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
    </button>
</div>


<style>
.wrapper {
    display: flex;
    max-width: 1200px;
    position: relative;
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    height: 44px;
    width: 44px;
    background: #fff;
    cursor: pointer;
    position: absolute;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, transform 0.1s linear;
    border: none;
}

.arrow.prev {
    left: -22px;
    display: none;
    z-index: 50;
}

.arrow.next {
    right: -22px;
}

.arrow svg {
    width: 15px;
    height: 15px;
}

.arrow:hover {
    background: #f2f2f2;
}

.arrow:active {
    transform: translateY(-50%) scale(0.9);
}

.carousel {
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}

.carousel.dragging {
    cursor: grab;
    scroll-behavior: auto;
}

.carousel.dragging img {
    pointer-events: none;
}

.carousel img {
    height: 340px;
    object-fit: cover;
    user-select: none;
    width: calc(100% / 3);
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.carousel a {
    margin-left: 14px;
}

.carousel a:first-child {
    margin-left: 0;
}

@media screen and (max-width: 900px) {
    .carousel img {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 550px) {
    .carousel img {
        width: 100%;
    }
}
</style>

<script>
const carousel = document.querySelector(".carousel"),
    firstImg = carousel.querySelectorAll("img")[0],
    arrowIcons = document.querySelectorAll(".wrapper .arrow");

let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;

const showHideIcons = () => {
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; 
    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
};

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        let firstImgWidth = firstImg.clientWidth + 14; 
      
        carousel.scrollLeft += icon.classList.contains("prev") ? -firstImgWidth : firstImgWidth;
        setTimeout(() => showHideIcons(), 60); 
    });
});

const autoSlide = () => {
    if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;

    positionDiff = Math.abs(positionDiff); 
    let firstImgWidth = firstImg.clientWidth + 14;
    let valDifference = firstImgWidth - positionDiff;

    if (carousel.scrollLeft > prevScrollLeft) { 
        carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    } else { // Scrolling left
        carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    }
};

const dragStart = (e) => {
    isDragStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;
};

const dragging = (e) => {
    if (!isDragStart) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("dragging");
    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;
    showHideIcons();
};

const dragStop = () => {
    isDragStart = false;
    carousel.classList.remove("dragging");

    if (!isDragging) return;
    isDragging = false;
    autoSlide();
};

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);

document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);

document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);

showHideIcons();

</script>

បន្ទាប់ពីបិទភ្ជាប់កូដរួច ចុចប៊ូតុង រក្សាទុក (Save)។ មើលប្លុករបស់អ្នក ដើម្បីឃើញស្លាយដំណើរការ។

ស្លាយរូបភាពដែលមានការរំកិលដោយស្វ័យប្រវត្តិ (Auto Scroll)

កូដ

<div class="wrapper">
    <button id="left" class="arrow prev" aria-label="Previous">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 18L9 12L15 6" stroke="#343F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </button>
    <div class="carousel">
        <a href="https://example.com/link1" target="_blank">
            <img src="https://images.pexels.com/photos/3561009/pexels-photo-3561009.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 1" draggable="false">
        </a>
        <a href="https://example.com/link2" target="_blank">
            <img src="https://images.pexels.com/photos/4348404/pexels-photo-4348404.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 2" draggable="false">
        </a>
        <a href="https://example.com/link3" target="_blank">
            <img src="https://images.pexels.com/photos/933255/pexels-photo-933255.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 3" draggable="false">
        </a>
        <a href="https://example.com/link4" target="_blank">
            <img src="https://images.pexels.com/photos/123335/pexels-photo-123335.jpeg?auto=compress&cs=tinysrgb&w=600" alt="img 4" draggable="false">
        </a>
    </div>
    <button id="right" class="arrow next" aria-label="Next">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 18L15 12L9 6" stroke="#343F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </button>
</div>

<style>
.wrapper {
    display: flex;
    max-width: 1200px;
    position: relative;
}

.arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    height: 44px;
    width: 44px;
    background: #fff;
    cursor: pointer;
    position: absolute;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.2s, transform 0.1s linear;
    border: none;
}

.arrow.prev {
    left: -22px;
    display: none; 
    z-index: 50;
}

.arrow.next {
    right: -22px;
}

.arrow svg {
    width: 12px;
    height: 12px;
}

.arrow:hover {
    background: #f2f2f2;
}

.arrow:active {
    transform: translateY(-50%) scale(0.9);
}

.carousel {
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
}

.carousel.dragging {
    cursor: grab;
    scroll-behavior: auto;
}

.carousel.dragging img {
    pointer-events: none;
}

.carousel img {
    height: 340px;
    object-fit: cover;
    user-select: none;
    width: calc(100% / 3);
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.carousel a {
    margin-left: 14px;
}

.carousel a:first-child {
    margin-left: 0;
}

@media screen and (max-width: 900px) {
    .carousel img {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 550px) {
    .carousel img {
        width: 100%;
    }
}
</style>

<script>
const carousel = document.querySelector(".carousel"),
    firstImg = carousel.querySelectorAll("img")[0],
    arrowIcons = document.querySelectorAll(".wrapper .arrow");

let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
let autoScrollInterval;

const showHideIcons = () => {
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth;
    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "flex";
    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "flex";
};

const startAutoScroll = () => {
    autoScrollInterval = setInterval(() => {
        let firstImgWidth = firstImg.clientWidth + 14;
        carousel.scrollLeft += firstImgWidth;

        if (carousel.scrollLeft >= carousel.scrollWidth - carousel.clientWidth) {
            carousel.scrollLeft = 0; 
        }
        showHideIcons();
    }, 3000); 
};

const stopAutoScroll = () => {
    clearInterval(autoScrollInterval);
};

// Call the startAutoScroll function
startAutoScroll();

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        stopAutoScroll();
        let firstImgWidth = firstImg.clientWidth + 14;
        carousel.scrollLeft += icon.classList.contains("prev") ? -firstImgWidth : firstImgWidth;
        setTimeout(() => showHideIcons(), 60);
        startAutoScroll(); // Resume auto-scroll after manual scroll
    });
});

const autoSlide = () => {
    if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
    positionDiff = Math.abs(positionDiff);
    let firstImgWidth = firstImg.clientWidth + 14;
    let valDifference = firstImgWidth - positionDiff;

    if (carousel.scrollLeft > prevScrollLeft) {
        carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    } else {
        carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    }
};

const dragStart = (e) => {
    stopAutoScroll();
    isDragStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;
};

const dragging = (e) => {
    if (!isDragStart) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("dragging");
    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;
    showHideIcons();
};

const dragStop = () => {
    isDragStart = false;
    carousel.classList.remove("dragging");
    if (!isDragging) return;
    isDragging = false;
    autoSlide();
    startAutoScroll(); 
};

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);

document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);

document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);

showHideIcons();

</script>

ស្លាយរូបភាពទី២ (រចនាប័ទ្មផ្សេង)

អ្នកអាចប្រើកូដខាងក្រោមដើម្បីបង្កើតស្លាយរូបភាពដូចដែលបង្ហាញក្នុងរូបថតអេក្រង់ខាងក្រោម។

កូដ

<style>
.slider-container {
  position: relative;
  max-width: 100%;
  height: 400px; /* Fixed height for slider */
  overflow: hidden;
}

  .slide {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
}

.slider img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
}

.prev, .next {
  position: absolute;
  top: 50%;
  font-size: 18px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  width: 40px; 
  height: 40px; 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s;
  user-select: none;
  z-index: 10;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.prev { left: 15px; }
.next { right: 15px; }

.dots {
  text-align: center;
  position: absolute;
  bottom: 15px;
  width: 100%;
  z-index: 10;
}

.dot {
  height: 14px;
  width: 14px;
  margin: 0 6px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Responsive Styles for Mobile */
@media (max-width: 768px) {
  .prev, .next {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .slider-container {
    height: 350px; /* Fixed height for Mobile */
  }
}

</style>

<div class="slider-container">
  <!-- Slide 1 -->
  <div class="slide">
    <a href="https://example.com/page1"><img src="https://images.pexels.com/photos/414974/pexels-photo-414974.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Slide 1"></a>
  </div>

  <!-- Slide 2 -->
  <div class="slide">
    <a href="https://example.com/page2"><img src="https://images.pexels.com/photos/325649/pexels-photo-325649.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Slide 2"></a>
  </div>

  <!-- Slide 3 -->
  <div class="slide">
    <a href="https://example.com/page3"><img src="https://images.pexels.com/photos/572056/pexels-photo-572056.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Slide 3"></a>
  </div>

  <!-- Navigation Buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <div class="dots">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
  </div>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let slides = document.getElementsByClassName("slide");
  let dots = document.getElementsByClassName("dot");
  
  if (n > slides.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = slides.length }
  
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (let i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

setInterval(function() {
  plusSlides(1);
}, 5000); 
</script>

សេចក្តីសន្និដ្ឋាន

ការបន្ថែមស្លាយរូបភាពទៅកាន់គេហទំព័រ Blogger របស់អ្នកគឺសាមញ្ញ ហើយជួយបង្កើនភាពទាក់ទាញផ្នែករូបរាងរបស់វា។ ដោយគ្រាន់តែប្រើ HTML, CSS, និង JavaScript អ្នកអាចបង្កើតស្លាយដែលមានមុខងារពេញលេញ និងឆ្លើយតប (responsive) បាន។ ឥឡូវនេះ អ្នកអាចបង្ហាញមាតិការបស់អ្នកបានយ៉ាងទាន់សម័យ និងធ្វើឲ្យអ្នកទស្សនាជាប់ចិត្ត!

ប្រសិនបើអ្នកយល់ថាការណែនាំនេះមានប្រយោជន៍ សូមមានអារម្មណ៍សេរីក្នុងការចែករំលែកវាទៅអ្នកដទៃ។ សូមរីករាយជាមួយការសរសេរប្លុក! 😊