Cara Membuat Slider Image Dengan HTML CSS dan JavaScript
www.gurudzgn.com - Hi Web Developer kembali lagi bersama dengan guru design, pada kesempatan kali ini kita akan membuat tutorial membuat slide gambar.
Slider gambar telah menjadi elemen desain yang populer dalam pengembangan web modern. Artikel ini akan memberi Anda panduan langkah demi langkah tentang cara membuat slider gambar yang interaktif dengan animasi menarik dan efektif. Dengan mengikuti panduan ini, Anda akan dapat meningkatkan tampilan dan fungsionalitas situs web Anda, memberikan pengalaman visual yang menarik bagi pengunjung, ok lanjut ke torialnya:
Cara Membuat Slider Image
Buka template blog anda atau Project blog anda kemudian tentukan lokasi yang anda inginkan untuk meletakkan kode slider.
Copy dan paste kode html
Copy dan paste kode html berikut, untuk link gambar bisa anda sesuaikan sendiri dengan gambar yang anda inginkan
<div class="slider-container">
<div class="slider">
<div class="slide">
<a href="https://www.gurudzgn.com/p/javascript.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlGyIaZM8ig8tzHMVVikcWAaBaKRge3UwGOCLVYioJUw1QR5m7G4pXwtPt_F8rZVLWAB0x7IzP8m_OVJNfnJQmqoF7ok_nsJjQW6CDxDgwB2yEmZpglkDHXTDGblzJ8FssVnOst8aJ8U-WaWHsbsOsGD8e2F468TSfAMfEhdMGWyB6Yhc70LkwhHDsrI/s960/Bg%20Post%20gurudzgn%20Copy%20%5B6FA83CC%5D.png" alt="javascript" />
</a>
</div>
<div class="slide">
<a href="https://www.gurudzgn.com/p/css.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUjnlUBAzFg6ufKsgnUVJO9Oqw7BS5XQ3E9EBHQyz_rUwiAHgSYj7tHBusCboCU1GmDQ1a-gpFNgv9oKeQD94LRidbedCLY0t41A9Enk5a7VKVbVevH82VDAotG9N8sgY2tswzCCJSpQYutt9m1m1Qy-_xKyiFJZvsn03NmFG7AwDoYZ4v6ZZlcJQP2vc/s960/Bg%20Post%20gurudzgn%20Copy%20%5B0FDC5D3%5D.png" alt="css" />
</a>
</div>
<div class="slide">
<a href="https://www.gurudzgn.com/p/javascript.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKlGyIaZM8ig8tzHMVVikcWAaBaKRge3UwGOCLVYioJUw1QR5m7G4pXwtPt_F8rZVLWAB0x7IzP8m_OVJNfnJQmqoF7ok_nsJjQW6CDxDgwB2yEmZpglkDHXTDGblzJ8FssVnOst8aJ8U-WaWHsbsOsGD8e2F468TSfAMfEhdMGWyB6Yhc70LkwhHDsrI/s960/Bg%20Post%20gurudzgn%20Copy%20%5B6FA83CC%5D.png" alt="javascript" />
</a>
</div>
</div>
<button class="prevslide" onclick="prevSlide()"><svg id="Layer_1" style="enable-background:new 0 0 64 64;" version="1.1" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{fill:#134563;}
</style><g><g id="Icon-Chevron-Left" transform="translate(237.000000, 335.000000)"><polyline class="st0" id="Fill-35" points="-199.1,-289 -212.9,-302.7 -199.1,-316.4 -197.1,-314.4 -208.9,-302.7 -197.1,-291 -199.1,-289 "></polyline></g></g></svg></button>
<button class="nextslide right" onclick="nextSlide()"><svg id="Layer_1" style="enable-background:new 0 0 64 64;" version="1.1" viewbox="0 0 64 64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{fill:#134563;}
</style><g><g id="Icon-Chevron-Left" transform="translate(237.000000, 335.000000)"><polyline class="st0" id="Fill-35" points="-210.9,-289 -212.9,-291 -201.1,-302.7 -212.9,-314.4 -210.9,-316.4 -197.1,-302.7 -210.9,-289 "></polyline></g></g></svg></button>
</div>
Copy dan paste kode CSS
Tambahkan kode CSS agar desain menarik, Anda dapat menyesuaikan sendiri bentuk atau desain yang anda inginkan.
<style>
.slider-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 20px auto -10px auto;
overflow: hidden;
border-radius: 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.slider {
transition: transform 0.5s ease-in-out;
white-space: nowrap;
font-size: 0;
}
.slide {
display: inline-block;
width: 100%;
overflow: hidden;
}
.slide img {
width: 100%;
object-fit: cover;
display: block;
margin: 0 auto;
max-height: 150px;
}
button.nextslide,button.prevslide {
position: absolute;
border-radius: 50px;
border:none;
background-color: rgba(255,255,255,0.497);
cursor: pointer;
padding:5px;
margin:10px;
font-size: 16px;
color: #555;
transition: color 0.3s;
top: 43%;
transform: translateY(-43%);
}
button.right{
right: 0;
}
button.nextslide:focus,button.prevslide:focus {
outline: none;
}
button.nextslide:hover,button.prevslide:hover {
color: #007bff;
}
button.nextslide svg,button.prevslide svg{
width:30px;
height:30px
}
</style>Copy dan paste kode javascript
Tambahkan JavaScript di bawah ini ke dalam Project anda agar desain lebih interaktif.
<script>
/*<![CDATA[*/
const slider = document.querySelector(".slider");
const slideItems = document.querySelectorAll(".slide");
let index = 0;
let interval;
let touchStartX = 0;
let touchEndX = 0;
function startSlide() {
interval = setInterval(nextSlide, 5000);
}
function nextSlide() {
index = (index + 1) % slideItems.length;
updateSlide();
}
function prevSlide() {
index = (index - 1 + slideItems.length) % slideItems.length;
updateSlide();
}
function updateSlide() {
slider.style.transform = `translateX(-${index * 100}%)`;
}
slider.addEventListener("mouseenter", () => clearInterval(interval));
slider.addEventListener("mouseleave", startSlide);
slider.addEventListener("touchstart", (e) => {
touchStartX = e.touches[0].clientX;
});
slider.addEventListener("touchend", (e) => {
touchEndX = e.changedTouches[0].clientX;
handleSwipe();
});
function handleSwipe() {
const SWIPE_THRESHOLD = 100;
if (touchEndX - touchStartX > SWIPE_THRESHOLD) {
prevSlide();
} else if (touchStartX - touchEndX > SWIPE_THRESHOLD) {
nextSlide();
}
}
startSlide();
/*]]>*/
</script>Untuk melihat hasil atau demonya silahkan Klik tombol di bawah ini
Terima kasih sudah menyimak, sekian sampai di sini tutorial kali ini jika ada yang belum bisa dipahami Silahkan tulis di kolom komentar.