สไลด์โชว์คู่มือการใช้งาน
แสดงสไลด์โชว์ด้วยตนเองด้วย W3.CSS เป็นเรื่องง่ายมาก
เพียงแค่สร้างองค์ประกอบหลายคนที่มีชื่อชั้นเดียวกัน
ตัวอย่าง
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
และสองปุ่มเพื่อเลื่อนภาพ:
ตัวอย่าง
<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>
และเพิ่ม JavaScript เพื่อเลือกภาพ:
ตัวอย่าง
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex
+= n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if
(n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex =
x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
ลองตัวเอง» อธิบาย JavaScript
ครั้งแรกที่ตั้ง slideIndex 1 (ภาพแรก)
แล้วโทร showDivs () เพื่อแสดงภาพแรก
เมื่อผู้ใช้คลิกปุ่มใดปุ่มหนึ่งเรียก plusDivs ()
plusDivs () ฟังก์ชันลบหนึ่งหรือเพิ่มหนึ่งไปยัง slideIndex
showDiv () หนังฟังก์ชั่น (จอแสดงผล = "ไม่มี") องค์ประกอบทั้งหมดที่มีชื่อชั้น "mySlides" และการแสดง (จอแสดงผล = "บล็อก") องค์ประกอบด้วย slideIndex ที่กำหนด
ถ้า slideIndex สูงกว่าจำนวนขององค์ประกอบ (x.length) ที่ slideIndex ตั้งค่าเป็นศูนย์
ถ้า slideIndex น้อยกว่า 1 ตั้งค่าไปที่จำนวนขององค์ประกอบ (x.length)
แสดงภาพสไลด์อัตโนมัติ
เพื่อแสดงภาพสไลด์อัตโนมัติได้ง่าย
คุณจำเป็นต้องมี JavaScript ที่แตกต่างกันเล็ก ๆ น้อย ๆ :
ตัวอย่าง
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display
= "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel,
2000); // Change image every 2 seconds
}
ลองตัวเอง» สไลด์ HTML
สไลด์ไม่จำเป็นต้องเป็นภาพ
พวกเขาสามารถเป็นเนื้อหา HTML ใด ๆ
ภาพนิ่ง 1
Lorem Ipsum
Slide 2
Lorem Ipsum
สไลด์ 3
Lorem Ipsum
ตัวอย่าง
<div class="mySlides">
<div class="w3-container w3-red">
<h1><b>Did You Know?</b></h1>
<h1><i>We plan to sell trips to the
moon in the 2020s</i></h1>
</div>
ลองตัวเอง» คำบรรยายภาพสไลด์โชว์
เพิ่มข้อความคำอธิบายสำหรับแต่ละภาพสไลด์กับชั้นเรียน * W3-Display- (ซ, รายนามสมาชิก, bottomleft, bottomright หรือกลาง):
ตัวอย่าง
<div class="w3-display-container mySlides">
<img src="img_fjords.jpg"
style="width:100%">
<div class="w3-display-bottomleft w3-container
w3-padding-hor-16 w3-black">
Trolltunga, Norway
</div>
</div>
ลองตัวเอง» ตัวชี้วัดสไลด์โชว์
ตัวอย่างของการใช้ปุ่มเพื่อระบุจำนวนภาพนิ่งที่มีอยู่ในสไลด์โชว์และที่เลื่อนผู้ใช้อยู่ในขณะนี้ดู
ตัวอย่าง
<div class="w3-center">
<button class="w3-btn" onclick="plusDivs(-1)">❮
Prev</button>
<button class="w3-btn" onclick="plusDivs(1)">Next
❯</button>
<button class="w3-btn demo" onclick="currentDiv(1)">1</button>
<button class="w3-btn demo" onclick="currentDiv(2)">2</button>
<button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>
ลองตัวเอง» ตัวอย่างอื่น:
ตัวอย่าง
<div class="w3-content w3-display-container">
<img class="mySlides"
src="img_nature.jpg">
<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div
class="w3-center w3-display-bottomleft" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>
ลองตัวเอง» ภาพที่เป็นตัวชี้วัด
ตัวอย่างของการใช้ภาพเป็นตัวชี้วัด:
ตัวอย่าง
<div class="w3-content" style="max-width:1200px">
<img class="mySlides"
src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_fjords_wide.jpg" style="width:100%">
<img class="mySlides"
src="img_mountains_wide.jpg" style="width:100%">
<div
class="w3-row-padding w3-section">
<div class="w3-col
s4">
<img class="demo w3-border
w3-hover-shadow"
src="img_nature_wide.jpg"
onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo
w3-border w3-hover-shadow"
src="img_fjords_wide.jpg"
onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo
w3-border w3-hover-shadow"
src="img_mountains_wide.jpg"
onclick="currentDiv(3)">
</div>
</div>
</div>
ลองตัวเอง» สไลด์เคลื่อนไหว
ตัวอย่าง
<img class="mySlides w3-animate-top" src="img_01.jpg">
<img class="mySlides
w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top" src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg"> ลองตัวเอง» จางหายไปนิเมชั่น
ตัวอย่าง
<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides
w3-animate-fading" src="img_02.jpg">
<img class="mySlides
w3-animate-fading" src="img_03.jpg">
<img class="mySlides
w3-animate-fading" src="img_04.jpg"> ลองตัวเอง»