Pada artikel kali ini saya akan menunjukkan cara membuat slider yang meluncur secara otomatis dan juga dengan tombol next dan previous menggunakan kode HTML CSS dan JavaScript.
Dalam tayangan slide dalam javascript ada jangka waktu penggantian konten, baik itu gambar atau video. Pengguna dapat memindahkan tombol ke tombol berikutnya dengan mengkliknya
Jenis penggeser ini digunakan di situs web untuk menyimpan berbagai jenis gambar secara bersamaan untuk ditampilkan sebagai galeri. Slider ini bekerja secara otomatis dan dapat dikontrol secara manual.
Sekarang, kita memulai penggeser gambar otomatis dalam javascript html css. Anda juga dapat menyebutnyapenggeser galeri js.
penggeser gambar javascript mudah untuk dikodekan tetapi Anda harus memahami logika di baliknya. Jadi, Anda dapat dengan mudah mendesain segala jenis slideshow otomatis html css js.
Langkah 1: Buat kode HTML
- Buat file .html
- Buat file .js
- buat file .css
- buat folder untuk gambar Anda
Dan tempatkan semua file ini dalam satu folder.
Saya menggunakan Visual Studio Code, Anda dapat menggunakan Editor Kode apa pun.
Tautkan file .css dan file .js Anda dengan file html Anda.
Sekarang, kami menambahkan gambar kami. Ambil div dan beri nama kelas “ utama”. Kemudian ambil div bagian dalam secara terpisah untuk setiap gambar dan tetapkan kelas "slide". Ini akan membantu kita dalam coding dan styling nanti.
Kita memerlukan dua tombol untuk mengontrol slider ini secara manual. Jadi, buat dua tombol dalam div induk yang sama menggunakan ‹Span›. Beri mereka kelas "panah" untuk menata gaya mereka dan tetapkan id mereka sebagai "sebelumnya" dan "berikutnya". Saya telah menambahkan Panah HTML yang telah ditentukan sebelumnya, Anda bisa mendapatkannya dari"toptal.com." Saya telah menugaskannya fungsi onclick yang akan kita bahas lebih lanjut di Javascript kita.
Langkah 2: penataan CSS
Pertama kita menata div utama kita. Berikan lebar maksimum 70%, tinggi 500px, margin dari atas dan bawah 100px dan otomatis dari kanan dan kiri untuk menjadikannya tengah. Berikan Box-sahdow warna abu-abu dan berikan posisi div utama ini “ relatif”.
Sekarang, kita menata panah Berikutnya dan Sebelumnya. Tetapkan mereka posisi "mutlak" dan 45% teratas untuk mengarahkan panah ini ke atas penggeser. Dan pindahkan panah kanan ke sisi kanan penggeser.
Langkah 3: Kode Javascript untuk penggeser gambar
Pertama-tama kita perlu memahami jumlah gambar dan nomor indeksnya.
buat variabel "slideno" dan berikan nilai "0". Dan buat fungsi slideshow( ), dan berikan nilai “slideno” ke fungsi ini.
Seperti yang Anda lihat secara default semua gambar ditampilkan di layar Anda. Kita perlu menyembunyikannya secara default dan membuat slide[0] terlihat secara default.
Gunakan “num” untuk menerima nilai “slideno” dalam fungsi. Karena kami telah memberikan semua slide kelas "slide" dalam kode html kami. Jadikan tampilan Tidak Ada untuk semua slide dan kemudian buat blok tampilan slide[0] secara default di awal.
buat fungsi untuk tombol Sebelumnya dan berikutnya.
Sekarang kita harus mengambil slide kembali ke '0' ketika mencapai Akhir slide dan mengambil slide mundur dengan tombol sebelumnya. Tambahkan kode ini ke fungsi slideshow Anda ( ).
Sekarang penggeser berfungsi dengan baik secara manual dengan tombol berikutnya dan sebelumnya. Sekarang kita harus membuatnya meluncur secara otomatis.
penggeser gambar dalam kode sumber javascript
Cukup salin dan tempel kode ini.
‹kelas div=”utama”›
‹kelas div=”slide”›
‹img src=”Gambar/gambar1.jpg” alt=””›
‹/div›
‹kelas div=”slide”›
‹img src=”Gambar/gambar2.jpg” alt=””›
‹/div›
‹kelas div=”slide”›
‹img src=”Gambar/gambar3.jpg” alt=””›
‹/div›
‹kelas div=”slide”›
‹img src=”Gambar/gambar4.jpg” alt=””›
‹/div›
‹kelas div=”slide”›
‹img src=”Gambar/gambar5.jpg” alt=””›
‹/div›
‹kelas div=”slide”›
‹img src=”Gambar/gambar6.jpg” alt=””›
‹/div›
‹span class=”panah” id=”prev” onclick=”pengontrol(-1)”›❮‹/span›
‹span class=”panah” id=”berikutnya” onclick=”pengontrol(+1)”›❯‹/span›
‹/div›
← — — — -Kode CSS — — — — →
*{
bantalan: 0;
margin: 0;
ukuran kotak: kotak perbatasan;
}
.utama{
lebar maksimal: 70%;
tinggi: 500 piksel;
margin: 100px otomatis;
bayangan kotak: 0px 0px 30px abu-abu;
posisi: relatif;
}
.anak panah{
kursor: penunjuk;
posisi: mutlak;
atas: 45%;
warna merah;
warna latar belakang: putih;
bantalan: 8px 18px;
ukuran font: 25 piksel;
berat font: tebal;
}
#Berikutnya{
kanan: -55 piksel;
}
← — — — — — — -js Kode — — — — — — — -›
/*Gambar 6 ( indeks: 0 1 2 3 4 5 )
Panjang =6 */
misalkan slideno = 0;
/* Tombol Sebelumnya dan Berikutnya*/
pengontrol fungsi(x) {
slideno = slideno + x;
tayangan slide (slide);
}
tayangan slide (slide);
/* Geser Otomatis */
setInterval(otomatis, 2000);
var penghitung = 0;
fungsi otomatis() {
var autoslides = document.getElementsByClassName(“slide”);
for (var semua slide otomatis) {
semua.gaya.display = “tidak ada”;
}
autoslides[counter].style.display = “blok”;
penghitung++;
if (penghitung == autoslides.length) {
penghitung = 0;
}
}
/* Fungsi tayangan slide*/
fungsi tayangan slide(angka) {
var slide = document.getElementsByClassName(“slide”);
/*memindahkan slide kembali ke '0' ketika mencapai Akhir slide*/
if (num == slide.panjangnya) {
slideno = 0;
angka = 0;
}
/*memindahkan slide ke belakang dengan tombol sebelumnya*/
jika (angka ‹ 0) {
slideno = slide.panjang — 1;
num = slide.panjang — 1;
}
/* Secara default membuat semua slide tidak menampilkan apa pun*/
for (var semua slide) {
semua.gaya.display = “tidak ada”;
}
/* Untuk menampilkan gambar pada [0] olehdeafalat*/
/*Akan menampilkan slide dengan nilai dalam variabel “num”*/
slides[num].style.display = “blok”;
}
Awalnya diterbitkan di https://www.freetipsandtrick.com pada 3 Desember 2022.
