Cara Membuat Efek Slider Sederhana Dengan Materialize
Pastinya teman-teman telah pernah melihat wujud atau efek dari gambar yang dapat jalan sendiri atau mesti kita swipe atau geser baru pindah, disini kita akan membuatnya seperti itu, dimana sebuah gambar apabila kit swipe atau geser akan menampilkan gambar berikutnya, amat keren ya, disini bagi belajar cara merancang efek slider sederhana dengan materialize, disini saya menggunakan materialize, dimana saya menyebutnya dengan library, bank, seperti seperti itulah karena disana terdapat tutorial-tutorial yang amat menarik bagi kita ikuti, oke bagaimana cara pembuatannya, simak terus ya teman-teman.
Cara merancang efek slider sederhana dengan materialize, Kita membutuhkan yang namanya sebuah javascript, tetapi disini kita tak akan pure membahas satu persatu-satu mengenai javascriptnya, kita akan seketika mengambil saja, dari tempatnya yaitu materialize, biasannya kebanyakan orang menyebutnya gunakan plugin, jadi kita tinggal ambi-ambil saja seperti kita menggunakan bootstrap, telah kebayang ya teman-teman, oke langkah pertama-tama yang mesti teman-teman siapkan yaitu unduh terlebih dahulu materializenya ada di fitur getting started, nanti di sebelah kanan terdapat HTML setup, copy saja bikin tampilan teman-teman, oke seketika saja suapaya enak teman-teman seketika liat saja gambar berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Cara Membangun efek slider sederhana dengan materialize</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-style type=text/css>
.container{
width: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div class=container>
<h1>Cara Membangun Efek Slider Sederhana Dengan Materialize </h1>
<div class=carousel carousel-slider>
<a class=carousel-item href=#one!><img src=https://lorempixel.com/800/400/food/1></a>
<a class=carousel-item href=#two!><img src=https://lorempixel.com/800/400/food/2></a>
<a class=carousel-item href=#three!><img src=https://lorempixel.com/800/400/food/3></a>
<a class=carousel-item href=#four!><img src=https://lorempixel.com/800/400/food/4></a>
</div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
</p>
<!--Import jQuery before materialize.js-->
-e-<-e-script type=text/javascript src=https://code.jquery.com/jquery-3.2.1.min.js></script>
<-e-script type=text/javascript src=js/materialize.min.js></script>
<-e-script type=text/javascript>
$('.carousel.carousel-slider').carousel({fullWidth: true});
</script>
</div>
</body>
</html>
disini saya masih menggunakan gambar bawaan dari blog materialize ya teman-teman. oke bagaimana hasilnya:
dapat di lihat ya gambar tersebut terjadi dikala saya ingin menggeser gambar sebelah kanan atau kiri karenanya akan tampil gambar sebelahnya, bagaimana amat menarik ya teman-teman dan saya rasa lumayan hingga disini dulu belajar kita mengenai, Cara merancang efek slider sederhana dengan materialize, semoga bermanfaat dan hingga jumpa di artikel salanjutnya terimakasih.
Sumber https://kursuswebsite.org
