Membuat slider/slideshow dengan HTML, CSS dan JS - Tentu saja di setiap halaman website kita sering menemukan layar desain berupa teks di menu dan juga dipadukan dengan icon di setiap menu. Fitur agar terlihat menarik dan fitur di Nah, kali ini saya akan membagikan tutorial cara membuat slider/slideshow dengan HTML, CSS dan JS.
Sebelum itu kita perlu memiliki prototipe desain referensi untuk memudahkan. Di sini saya sudah memiliki prototipe desain Wlijo di halaman Wlijo. dalam kategori simbol seperti yang ditunjukkan di bawah ini:
Kode HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/1.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/2.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/3.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="image/4.jpg" style="width:100%; border-radius: 10px;">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
<script src="home.js" type="text/JavaScript"></script>
</body>
</html>
Kede CSS
* {box-sizing:border-box}
body {
background-color: #F0EDED;
}
/* Slideshow container */
.slideshow-container {
max-width: 900px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Kode JS
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Output
Gambar diatas merupakan output dari codingan HTML, CSS dan JS yang telah kita buat. dimana outputnya sesuai dengan design prototype yang telah kita design di figma sebelumnya.
Referensi :
Komentar
Posting Komentar