Setelah beberapa waktu yang lalu kita telah belajar membuat slider, atau memang sudah banyak juga artikel yang membahas tentang pembuatan slider, tetapi alangkah baiknya ketika gambar di ganti, ada sebuah tulisan gunaanya apa ? yaitu bisa saja untuk mempercantik sebuah slidernya, memberikan keterangan pada gambarnya betulkan, dengan caption slider juga tidak terasa kosong, oke bagaimana cara memberikan caption yang berbeda di sebuah Slider. simak terus ya teman-teman.
Cara memberikan caption yang berbeda di sebuah Slider, kita memberikan captionya atau tulisannya tidak menggunakan phostoshop ya teman-teman. dimana tulisan itu atau caption itu nantinnya kita bisa klik, disini saya masih menggunakan bantuan dari materialize untuk membuat efek seperti ini, dengan materialize juga saya bisa membuat caption dengan mudah di slider, dulu ketika saya ingin mengatur atau menggunakan caption, saya harus mengatur manual menggunakan position relative dan absoulte, tetapi disini sudah tidak ya teman-teman. oke bagaiman cara membuatnya perhatikan struktur HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Cara Memberikan Caption yang Berbeda di Sebuah Slider</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<-e-estyle type="text/css">
.container{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Cara Memberikan Caption yang Berbeda di Sebuah Slider</h1>
<div class="slider">
<ul class="slides">
<li>
<img src="https://lorempixel.com/580/250/nature/1"> <!-- random image -->
<div class="caption center-align">
<h3>Caption akan tampil dari atas</h3> <!-- isi captionya disini -->
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> <!-- isi captionya disini -->
</div>
</li>
<li>
<img src="https://lorempixel.com/580/250/nature/2"> <!-- random image -->
<div class="caption left-align">
<h3>Caption akan tampil dari kiri</h3><!-- isi captionya disini -->
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5><!-- isi captionya disini -->
</div>
</li>
<li>
<img src="https://lorempixel.com/580/250/nature/3"> <!-- random image -->
<div class="caption right-align">
<h3>Caption akan tampil dari kanan</h3><!-- isi captionya disini -->
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5><!-- isi captionya disini -->
</div>
</li>
<li>
<img src="https://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>caption ini efeknya sama seperti gambar pertama</h3><!-- isi captionya disini -->
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5><!-- isi captionya disini -->
</div>
</li>
</ul>
</div>
<!--Import jQuery before materialize.js-->
<-e-escript type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<-e-escript type="text/javascript" src="js/materialize.min.js"></script>
<-e-escript type="text/javascript">
$(document).ready(function(){
$('.slider').slider();
});
</script>
</div>
</body>
</html>
Jika teman-teman sudah pernah belajar HTML CSS pasti tau ya, mana struktur html yang membuat caption di slider.
<div class="caption left-align">
<h3>Caption akan tampil dari kiri</h3><!-- isi captionya disini -->
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5><!-- isi captionya disini -->
</div>
dan JSnya ini:
<-e-script type="text/javascript">
$(document).ready(function(){
$('.slider').slider();
});
</script>
dan begini lah hasilnya:
bisa dilihat ya kita juga bisa memberikan efek caption itu akan keluar dari sebelah mana, oke saya kira sudah cukup jelas ya untuk kita belajar Cara memberikan caption yang berbeda di sebuah Slider, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.
The post Cara Memberikan Caption yang Berbeda di Sebuah Slider appeared first on Kursus Website Terbaik.