W3.CSS slayd-shou
Qo‘lda va avtomatik boshqariladigan slayd-shoular
W3.CSS qo‘lda va avtomatik boshqariladigan slayd-shoular yaratishni osonlashtiradi.
Slaydlar rasmlar, matn, izohlar (caption), indikatorlar va animatsiya klasslarini o‘z ichiga olishi mumkin.
Qo‘lda boshqariladigan slayd-shou
Misol
Bir xil klass nomiga ega bir nechta element yarating:
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">
Orqaga va oldinga o‘tish uchun tugmalar qo‘shing:
<button class="w3-button w3-display-left"
onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-display-right"
onclick="plusDivs(+1)">❯</button>
Qaysi slayd ko‘rsatilishini tanlash uchun JavaScript’dan foydalaning:
let slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
const slides = document.querySelectorAll(".mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
slides.forEach(slide => {
slide.style.display = "none";
});
slides[slideIndex - 1].style.display = "block";
}
O‘zingiz sinab ko‘ring »
JavaScript tushuntirmasi
slideIndex o‘zgaruvchisi joriy slayd raqamini saqlaydi.
plusDivs() funksiyasi slayd raqamini o‘zgartiradi.
showDivs() funksiyasi mySlides klassiga ega barcha elementlarni yashiradi, so‘ng tanlangan slaydni ko‘rsatadi.
Agar slayd raqami oxirgi slayddan oshib ketsa, slayd-shou yana birinchi slayddan boshlanadi. Agar raqam birinchi slayddan kichik bo‘lib qolsa, oxirgi slaydga o‘tadi.
Avtomatik slayd-shou
Avtomatik slayd-shouni ko‘rsatish bundan ham oson.
Sizga biroz boshqacha JavaScript kerak bo‘ladi, xolos:
Misol
let slideIndex = 0;
carousel();
function carousel() {
const slides = document.querySelectorAll(".mySlides");
slides.forEach(slide => {
slide.style.display = "none";
});
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000);
}
O‘zingiz sinab ko‘ring »
HTML slaydlar
Slaydlar rasm bo‘lishi shart emas.
Ular har qanday HTML kontent bo‘lishi mumkin:
Slide 1
Lorem ipsum
Slide 2
Lorem ipsum
Slide 3
Lorem ipsum
Misol
<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>
</div>
O‘zingiz sinab ko‘ring »
Slayd-shou izohlari
Izohlarni w3-display-bottomleft yoki w3-display-topright kabi w3-display klasslaridan biri bilan qo‘shing:
Misol
<div class="w3-display-container mySlides">
<img src="img_snowtops.jpg" style="width:100%">
<div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
French Alps
</div>
</div>
O‘zingiz sinab ko‘ring »
Slayd-shou indikatorlari
Slayd-shouda nechta slayd borligini va foydalanuvchi hozir qaysi slaydni ko‘rayotganini ko‘rsatish uchun tugmalardan foydalanish misoli.
Misol
<div class="w3-center">
<button class="w3-button" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button" onclick="plusDivs(1)">Next ❯</button>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
<button class="w3-button demo" onclick="currentDiv(3)">3</button>
</div>
O‘zingiz sinab ko‘ring »
Yana bir misol:
Misol
<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottommiddle" 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>
O‘zingiz sinab ko‘ring »
Indikator sifatida rasmlar
Rasmlardan indikator sifatida foydalanish misoli:
Misol
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
<img class="mySlides" src="img_snow_wide.jpg" style="width:100%">
<img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
<div class="w3-grid w3-section"
style="grid-template-columns:repeat(3,1fr);gap:8px">
<img class="demo w3-opacity" src="img_nature_wide.jpg"
style="width:100%" onclick="currentDiv(1)">
<img class="demo w3-opacity" src="img_snow_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(2)">
<img class="demo w3-opacity" src="img_mountains_wide.jpg"
style="width:100%;display:none" onclick="currentDiv(3)">
</div>
</div>
O‘zingiz sinab ko‘ring »
Bitta sahifada bir nechta slayd-shou
Bitta sahifada bir nechta slayd-shouni boshqarish uchun har bir slayd-shou guruhining elementlariga turli klasslar berishingiz kerak:
Misol
<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>
<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
O‘zingiz sinab ko‘ring »
Animatsiyali slaydlar
Slayd-shou kontentini surib chiqarish yoki asta paydo qilish uchun w3-animate klasslaridan birini ishlating.
Misol
<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">
O‘zingiz sinab ko‘ring »
Asta paydo bo‘lish animatsiyasi
w3-animate-fading klassi elementni uzluksiz asta paydo qilib, asta yo‘qotadi.
Misol
<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">
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!