กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • slider+auto+loop+counter+responsive (BKintercontech.com สำรองสไลด์)

    January 30, 2024

    เขียนเองง่ายกว่าหาโค๊ด ถ้าต้องการคุณสมบัติครบ
    เว็บที่น่าเชื่อถือเป็นการเป็นงาน สไลด์อาจไม่ต้องซ้ำ
    คนดูเว็บจะสับสน ไม่ควรโลดโผนเกินไป ให้พอเหมาะ
    สังเกตจะพบว่าเว็บแนวเด็กๆน่ารักๆจะเป็นอีกแบบ
    เช่น มีรูปกลิตเตอร์กระพริบ ซึ่งอาจไม่เหมาะกับเว็บที่ต้องสร้างความน่าเชื่อถือ
    การออกแบบต้องเรียบง่าย ไม่วุ่นวาย เลอะเทอะ และให้ความรู้สึกมั่นคง

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Slideshow with Number Counter</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
			border: solid 10px red;
        }

        .mySlides {
            display: none;
        }

        .slide-number {
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px;
            font-size: 16px;
            color: #fff;
            background: #333;
			text-align:center;
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -30px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            cursor: pointer;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
			background-color:red;
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

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

        .dot {
		padding:5px 15px;
		margin: 0 2px;
        background-color:orangered;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
            cursor: pointer;
			color:white;
			font-family:Kanit;
			font-weight:bold;
        }

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


        @media screen and (max-width: 600px) {
            .prev, .next {
                font-size: 12px;
				background-color:gold;
            }
        }
    </style>
</head>
<body>

<div class="slideshow-container">
    <div class="mySlides">
        <img src="image1.jpg" style="width:100%">
        <!--<div class="slide-number" onclick="currentSlide(1)">1</div>-->		
    </div>

    <div class="mySlides">
        <img src="image2.jpg" style="width:100%">
        <!--<div class="slide-number" onclick="currentSlide(2)">2</div>-->
    </div>

    <div class="mySlides">
        <img src="image3.jpg" style="width:100%">
        <!--<div class="slide-number" onclick="currentSlide(3)">3</div>-->
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)">1</span>
        <span class="dot" onclick="currentSlide(2)">2</span>
        <span class="dot" onclick="currentSlide(3)">3</span>
    </div>
</div>

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

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

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

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");

        if (n > slides.length) {
            slideIndex = 1;
        }

        if (n < 1) {
            slideIndex = slides.length;
        }

        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }

        for (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";
    }

    // เพิ่มฟังก์ชัน autoSlide
    function autoSlide() {
        plusSlides(1);
    }

    // เรียกใช้ autoSlide ทุก 3 วินาที
    setInterval(autoSlide, 3000);
</script>

</body>
</html>
    <style>
  /* Your existing styles remain unchanged */

  /* Add a class to make the transition smoother */
  .transition {
    transition: transform 400ms ease, box-shadow 400ms ease;
  }
</style>

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories