tutorial pengembangan web terbaru

W3.CSS slideshow

❮ Sebelumnya Berikutnya Bab ❯

pengguna slideshow

Menampilkan slideshow pengguna dengan W3.CSS sangat mudah.

Hanya membuat banyak elemen dengan nama kelas yang sama:

Contoh

<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">

Dan dua tombol untuk menggulir gambar:

Contoh

<a class="w3-btn-floating" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">❯</a>

Dan menambahkan JavaScript untuk memilih gambar:

Contoh

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

Cobalah sendiri "

JavaScript Dijelaskan

Pertama, mengatur slideIndex ke 1. (gambar pertama)

Kemudian memanggil showDivs () untuk menampilkan gambar pertama.

Ketika pengguna mengklik salah satu tombol panggilan plusDivs ().

The plusDivs () fungsi mengurangi satu atau menambahkan satu ke slideIndex.

The showDiv () menyembunyikan fungsi (display = "none") semua elemen dengan nama kelas "mySlides", dan menampilkan (display = "block") elemen dengan slideIndex diberikan.

Jika slideIndex lebih tinggi dari jumlah elemen (x.length), yang slideIndex diatur ke nol.

Jika slideIndex kurang dari 1 sudah diatur untuk jumlah elemen (x.length).

otomatis slideshow

Untuk menampilkan slideshow otomatis bahkan lebih sederhana.

Anda hanya perlu sedikit JavaScript yang berbeda:

Contoh

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
}

Cobalah sendiri "

Slide HTML

Slide tidak harus gambar.

Mereka dapat berupa konten HTML:

Slide 1

Lorem ipsum

Slide 2

Lorem ipsum

Slide 3

Lorem ipsum

Contoh

<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>

Cobalah sendiri "

slideshow Caption

Trolltunga, Norwegia

Northern Lights, Norway

Pegunungan yang indah

Hutan hujan

Pegunungan!

Tambahkan teks keterangan untuk setiap slide gambar dengan w3-Tampilan- kelas * (topleft, topright, bottomleft, bottomRight atau menengah):

Contoh

<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>

Cobalah sendiri "

Indikator slideshow

Contoh penggunaan tombol untuk menunjukkan berapa banyak slide yang ada di slide, dan yang meluncur pengguna saat melihat.

Contoh

<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>

Cobalah sendiri "

Contoh lain:

❮

❯

Contoh

<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>

Cobalah sendiri "

Gambar sebagai Indikator

Contoh penggunaan gambar sebagai indikator:

Contoh

<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>

Cobalah sendiri "

animasi Slide

Contoh

<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">

Cobalah sendiri "

memudar Animasi

Contoh

<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">

Cobalah sendiri "

❮ Sebelumnya Berikutnya Bab ❯