Tampilan website yang unik dan menarik sangat manrik
pengunjung untuk mempir ke website kita nah maka dari itu kali iki Poil akan
membuat tampilan gambar bergerak seperti sponsor TV.
Yang pertama yang harus kita lakukan adalah membuat
rangkaian tubuh HTML dengan cara simpan file lalu ketik ‘!’ dan enter maka akan
otomatis mambuat rangkain tubuh HMTL seperti di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Lanjut karena saya akan membuat tampilan gambar bergerak di Body maka kita akan masuk ke body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>E Store - eCommerce HTML Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="eCommerce HTML Template Free Download" name="keywords">
<meta content="eCommerce HTML Template Free Download" name="description">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Code+Pro:700,900&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/slick/slick.css" rel="stylesheet">
<link href="lib/slick/slick-theme.css" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Brand Start -->
<div class="brand">
<div class="container-fluid">
<div class="brand-slider">
<div class="brand-item"><img src="img/brand-1.png" alt=""></div>
<div class="brand-item"><img src="img/brand-2.png" alt=""></div>
<div class="brand-item"><img src="img/brand-3.png" alt=""></div>
<div class="brand-item"><img src="img/brand-4.png" alt=""></div>
<div class="brand-item"><img src="img/brand-5.png" alt=""></div>
<div class="brand-item"><img src="img/brand-6.png" alt=""></div>
</div>
</div>
</div>
<!-- Brand End -->
<!-- Back to Top -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/slick/slick.min.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
</html>
Nah jika sudah maka selanjutkan adalah membuat CSS atau Style-nya
/**********************************/
/*********** Brand CSS ************/
/**********************************/
.brand {
position:
relative;
margin-bottom:
30px;
padding: 30px 0;
background:
#ffffff;
}
.brand .brand-item {
text-align:
center;
}
.brand .brand-item img {
max-width: 100%;
margin: auto;
}
.brand .slick-prev,
.brand .slick-next {
width: 40px;
height: 40px;
z-index: 1;
opacity: 0;
transition: .5s;
background:
#FF6F61;
border-radius:
4px;
}
.brand .slick-prev {
left: 55px;
}
.brand .slick-next {
right: 55px;
}
.brand .slick-slider:hover .slick-prev {
left: 15px;
opacity: 1;
}
.brand .slick-slider:hover .slick-next {
right: 15px;
opacity: 1;
}
.brand .slick-prev:hover,
.brand .slick-prev:focus,
.brand .slick-next:hover,
.brand .slick-next:focus {
background:
#000000;
}
.brand .slick-prev:hover::before,
.brand .slick-prev:focus::before,
.brand .slick-next:hover::before,
.brand .slick-next:focus::before {
color: #FF6F61;
}
.brand .slick-prev::before,
.brand .slick-next::before {
font-family:
"Font Awesome 5 Free";
font-weight: 900;
font-size: 30px;
color: #000000;
}
.brand .slick-prev::before {
content:
"\f104";
}
.brand .slick-next::before {
content:
"\f105";
}
Maka hasilnya nanti akan seperti ini
Nah gimana
sobat Poil Mudah bukan membuat Tampilan Gambar Bergerak Seperti Sponsor TV
Semoga membantu
ingat untuk menggerkan kita butuh JS
maka dari itu jangan lupa untuk menambahkannya
