Tampilan Slide Gambar Latar Belakang menggunakan Javascript

sukma
sukma
2 minute read

Hari ini, saya di sini dengan tampilan slide gambar latar belakang berbasis JavaScript keren lainnya yang dapat digunakan untuk menggeser gambar dengan teks teks. Meskipun, ini adalah slider sederhana tetapi dapat sepenuhnya disesuaikan dalam JavaScript dengan opsi dasarnya. Ia memiliki kemampuan untuk meluncur melalui konten HTML apa pun dengan kecepatan tertentu.

Jika Anda sudah memiliki banyak JavaScript di halaman web Anda, maka Anda dapat menggunakan CSS Background Image Slider yang dibangun hanya dengan CSS.

Ini memiliki fungsi buletin dan juga memiliki panah kiri / kanan untuk menggeser gambar. Ini adalah penggeser foto layar penuh yang terbaik untuk situs desain satu halaman.

Anda dapat dengan mudah berubah menjadi penggeser kecil alih-alih layar penuh dengan menempatkan kode HTML ke dalam wadah.

Slider dilengkapi dengan fungsi dasar untuk mengontrol putar otomatis, menambahkan penundaan, dan mengatur kecepatan slide. Ini memungkinkan menyesuaikan kelas menggunakan JavaScript. Jika Anda tidak terbiasa dengan JavaScript, Anda bisa memulai dengan itu.

Bagaimana cara menggunakan Slideshow Gambar Latar menggunakan JavaScript?

Pertama-tama, unduh proyek ini dan sertakan "simpleSlider.min.css" File CSS ke dalam head tag dokumen HTML Anda. Juga, sertakan file JavaScript "simpleSlider.min.js" sebelum penutupan body menandai.

<link rel="stylesheet" href="https://codeconvey.com/background-image-slideshow-using-javascript/dist/simpleSlider.min.css"> <script src="dist/simpleSlider.min.js"></script>

Setelah memuat aset slider, buat struktur HTML untuk slider gambar sebagai berikut:

<div class="simple-slider simple-slider-demo">   <div class="slider-wrapper">     <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">       First slide     </div>     <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">       Second slide     </div>     <div class="slider-slide" style="background-image: url('https://placehold.it/1200x400')">       Third slide     </div>   </div>   <div class="slider-btn slider-btn-prev"></div>   <div class="slider-btn slider-btn-next"></div> </div>

Inisialisasi slider dalam HTML script tandai dan selesai.

var slider = new simpleSlider('.simple-slider-demo');

Jika Anda ingin menyesuaikan durasi transisi dalam milidetik. Menggunakan speed opsi dalam inisialisasi plugin dan berikan nilai Anda dalam angka.

var slider = new simpleSlider('.simple-slider-demo',{     speed: 2000 });

Setel jeda antar transisi dalam milidetik. Berikan nilai Anda dalam angka.

var slider = new simpleSlider('.simple-slider-demo',{     delay: 6000 });

Jika Anda ingin mengaktifkan / menonaktifkan fungsionalitas putar otomatis, gunakan opsi berikut. Nilai yang mungkin adalah true dan false. Nilai "benar" berarti aktif dan "salah" berarti nonaktif.

var slider = new simpleSlider('.simple-slider-demo',{     autoplay: true });

Berikut ini adalah kelas CSS default yang digunakan dalam slider.

var slider = new simpleSlider('.simple-slider-demo',{     classes: {       wrapper: 'slider-wrapper',    // wrapper class [string]       slide: 'slider-slide',    // slide class [string]       buttons: 'slider-btn'   // buttons class [string]     } });