contents #2 ใน appscript

#พื้นฐานการเขียนเว็ปไซต์

#google #appscript

วิธีการสร้างสไลด์ 3 ภาพ โดยใช้ HTML, CSS และแท็ก input radio มีดังนี้

โครงสร้าง HTML

คุณจะเริ่มต้นด้วยการสร้างโครงสร้างหลักใน HTML ซึ่งประกอบด้วย container สำหรับห่อหุ้มสไลด์ทั้งหมด, slides สำหรับแต่ละภาพ, และ labels ที่ทำหน้าที่เป็นปุ่มควบคุม การใช้แท็ก input type="radio" ร่วมกับ label ทำให้คุณสามารถสลับภาพได้โดยไม่ต้องใช้ JavaScript

• container: คือส่วนหลักที่ครอบคลุมทุกองค์ประกอบ ใช้สำหรับกำหนดขนาดและตำแหน่งของสไลด์ทั้งหมด

• slides: แต่ละภาพจะถูกใส่ไว้ใน div ที่มี class ว่า slide โดยแต่ละ div จะถูกกำหนดตำแหน่งให้ซ้อนทับกัน

• navigation: ส่วนนี้ประกอบด้วย input type="radio" และ label ซึ่งใช้ควบคุมการแสดงภาพ แต่ละ input จะมี id ที่ไม่ซ้ำกัน และแต่ละ label จะมี for attribute ที่อ้างอิงถึง id ของ input นั้นๆ เมื่อผู้ใช้คลิก label จะเป็นการเลือก input ที่เกี่ยวข้องและสามารถใช้ CSS เพื่อเปลี่ยนภาพได้

◦ input: จะถูกซ่อนไว้ด้วย CSS

◦ label: จะถูกออกแบบให้เป็นจุดหรือปุ่มที่ผู้ใช้มองเห็นและคลิกได้

โค้ด HTML

HTML

<div class="slider-container">

<div class="slider">

<input type="radio" id="slide1" name="slider-nav" checked>

<input type="radio" id="slide2" name="slider-nav">

<input type="radio" id="slide3" name="slider-nav">

<div class="slides">

<div class="slide slide-1">

<h1>สไลด์ 1</h1>

<p>เนื้อหาสำหรับสไลด์แรก</p>

</div>

<div class="slide slide-2">

<h1>สไลด์ 2</h1>

<p>เนื้อหาสำหรับสไลด์ที่สอง</p>

</div>

<div class="slide slide-3">

<h1>สไลด์ 3</h1>

<p>เนื้อหาสำหรับสไลด์ที่สาม</p>

</div>

</div>

</div>

<div class="dots-nav">

<label for="slide1"></label>

<label for="slide2"></label>

<label for="slide3"></label>

</div>

</div>

โค้ด CSS

CSS เป็นส่วนสำคัญที่ทำให้สไลด์ทำงานได้

• การกำหนดตำแหน่ง: ใช้ position: relative สำหรับ slider-container และ position: absolute สำหรับ slides เพื่อให้ภาพทั้งหมดซ้อนทับกันอยู่ภายใน container

• การซ่อน Input: ซ่อน input type="radio" ด้วย display: none; หรือ visibility: hidden;

• การแสดงภาพ: ใช้ opacity: 0; เพื่อซ่อนสไลด์ทั้งหมด และเมื่อ input ถูกเลือกด้วย :checked pseudoclass ก็จะเปลี่ยน opacity ของสไลด์ที่เกี่ยวข้องเป็น 1

• การตกแต่ง Dot: ออกแบบ label ให้เป็นวงกลมหรือจุด (dot) และใช้ :checked + .slides เพื่อเปลี่ยนสีของ dot เมื่อสไลด์นั้นถูกเลือกอยู่

CSS

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f0f0f0 ;

margin: 0;

}

.slider-container {

width: 80%;

max-width: 600px;

height: 400px;

position: relative;

overflow: hidden;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

border-radius: 8px;

}

.slider {

width: 100%;

height: 100%;

position: relative;

}

.slider input[type="radio"] {

display: none;

}

.slides {

width: 100%;

height: 100%;

position: relative;

}

.slide {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

opacity: 0;

transition: opacity 0.5s ease-in-out;

background-color: #fff ;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 20px;

box-sizing: border-box;

}

#slide1 :checked ~ .slides .slide-1,

#slide2 :checked ~ .slides .slide-2,

#slide3 :checked:checked ~ .slides .slide-3 {

opacity: 1;

}

.dots-nav {

position: absolute;

bottom: 20px;

left: 50%;

transform: translateX(-50%);

display: flex;

gap: 10px;

}

.dots-nav label {

width: 12px;

height: 12px;

background-color: #ccc ;

border-radius: 50%;

cursor: pointer;

transition: background-color 0.3s ease;

}

#slide1 :checked ~ .dots-nav label[for="slide1"],

#slide2 :checked ~ .dots-nav label[for="slide2"],

#slide3 :checked ~ .dots-nav label[for="slide3"] {

background-color: #333 ;

}

คำอธิบายเพิ่มเติม

โค้ดนี้ใช้ CSS sibling combinator (~) ซึ่งจะเลือกองค์ประกอบที่อยู่ระดับเดียวกัน (sibling) เพื่อเปลี่ยนคุณสมบัติของสไลด์เมื่อ input ที่เกี่ยวข้องถูกเลือก (:checked) วิธีนี้ทำให้การสร้างสไลด์ทำงานได้โดยไม่ต้องเขียนโค้ด JavaScript ใด ๆ ซึ่งช่วยลดความซับซ้อนของโค้ดลงได้มาก