Cara Membuat Banner Slider HTML dan JavaScript

Pernahkah Kamu ketika membuat website serasa ada yang kurang kalo tidak membuat banner slider. Namun bagaimana caranya membuat banner website?.

Pada artikel alafgani.web.id kali ini kita akan belajar bagaimana Cara Membuat Banner Slider HTML dan JavaScript. Langsung saja simak tutorialnya dibawah ini.

Table of Contents

Apa itu Banner Slider?

Banner slider atau bisa disebut slide gambar adalah biasa digunakan untk pembuatan gambar bergerak yang berisi iklan gambar atau artikel yang disajikan di halaman website. Banner Slider ini bertujuan untuk mengikat daya tarik pengunjung agar website terlihat menarik.

Persiapan Membuat Banner Slider

Sebelum kita masuk kedalam praktiknya alangkah baiknya, Kamu siapkan terlebih dahulu gambar yang ada dijadikan Slider yang nantinya akan bergerak secara otomatis, Langkah selanjutnya buatlah file index.html , style.css dan javascript.js. File ini yang akan kita gunakan untuk proses coding nanti.

Membuat Banner Slider

Masukan coding ini kedalam masing-masing file yang sudah disiapkan tadi.

Index.html

<!--Slider-->
<div id="slider"> 
<div class="slide" style="background:dodgerBlue;">
<img src="https://plus.unsplash.com/premium_photo-1666264200764-7c9cff2c60ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" >
</div>



<div class="slide" style="background:crimson;">
<img src=" https://images.unsplash.com/photo-1683123851333-69ad192688fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" >
</div>

<div class="slide" style="background: #6edf10;">
<img src="https://images.unsplash.com/photo-1683803142077-e6afa3cb00cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1464&q=80" >
</div>

<!--Controlling arrows-->
<span class="controls" onclick="prevSlide(-1)" id="left-arrow"><i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
<span class="controls" id="right-arrow" onclick="nextSlide(1)"><i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</div>
<div id="dots-con">
<span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
</div>

Style.css

body{
background:purple;
}
#slider{
width:80%;
margin:0 auto;
position:relative;
overflow:hidden;
box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}

.slide{
width:100%;

display:none;
animation-name:fade;
animation-duration:1s;

}
img{
width:100%;

}
@keyframes fade{
from{opacity:0.5;}
to{opacity:1;}
}

.controls{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:1.5em;
padding:15px 10px;
border-radius:5px;

}

.controls:hover{
background:white;
transition:0.3s;
}

.controls:active{
color:grey;
}

#left-arrow{
left:10px;
}

#right-arrow{
right:10px;
}

#dots-con{

text-align:center;
}
.dot{
display:inline-block;
background:grey;
padding:8px;
border-radius:50%;
margin:10px 5px;
}

.active{
background:crimson;
}

@media (max-width:576px){
#slider{width:100%;

}

.controls{
font-size:1em;
}

#dots-con{
display:none;
}
}

Javascript.Js

var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");
var index = 0;


function prevSlide(n){
index+=n;
console.log("prevSlide is called");
changeSlide();
}

function nextSlide(n){
index+=n;
changeSlide();
}

changeSlide();

function changeSlide(){

if(index>slides.length-1)
index=0;

if(index<0)
index=slides.length-1;



for(let i=0;i<slides.length;i++){
slides[i].style.display = "none";

dots[i].classList.remove("active");


}

slides[index].style.display = "block";
dots[index].classList.add("active");


}

Penutup

Itulah bagaimana cara membuat banner slider html sederhana, dengan mengikuti syntax yang diatas sudah pasti Kamu memahaminya, Jika kurang paham bisa tulis dikolom komentar yah! demikian tutorial ini semoga bermanfaat. Terimakasih sudah berkunjung.

Mencari Kursus Website WordPress Bergaransi dan Termurah?
Kursus Ini Memberikan Kesempatan Bagi Anda Untuk Mempelajari Dasar-Dasar Dan Teknik-Teknik Lanjutan Dalam Menggunakan Platform WordPress Yang Terkenal.

Halo! Perkenalkan saya Alafgani Developer. Seorang Freelancer Web Developer kurang lebih 5 Tahun berpengalaman dan ber tim bersama Developer Profesional.

Bergabunglah bersama Alafgani Developer dan temukan potensi penuh dalam platform populer ini! Dalam kursus belajar WordPress. Disini Saya juga akan membahas teknik SEO yang efektif, yang akan membantu meningkatkan peringkat situs Anda di mesin pencari. Bergabung Sekarang Juga.