Cara Memberikan Caption yang Berbeda di Sebuah Slider
Setelah beberapa waktu yang lalu kita telah belajar merancang slider, atau memang telah banyak pun artikel yang membahas mengenai perancangan slider, tetapi alangkah baiknya ketika gambar di ganti, ada sebuah tulisan gunaanya apa ? yaitu dapat saja bagi mempercantik sebuah slidernya, memberikan keterangan di gambarnya betulkan, dengan caption slider pun tak 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 tak menggunakan phostoshop ya teman-teman. dimana tulisan itu atau caption itu nantinnya kita dapat klik, disini saya masih menggunakan bantuan dari materialize bagi merancang efek seperti ini, dengan materialize pun saya dapat merancang caption dengan gampang di slider, dulu ketika saya ingin mengatur atau menggunakan caption, saya mesti mengatur manual menggunakan position relative dan absoulte, tetapi disini telah tak 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 blog 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-tama</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>
Kalau teman-teman telah pernah belajar HTML CSS pasti tau ya, mana struktur html yang merancang 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:
dapat dilihat ya kita pun dapat memberikan efek caption itu akan keluar dari sebelah mana, oke saya kira telah lumayan jelas ya bagi kita belajar Cara memberikan caption yang berbeda di sebuah Slider, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
