Pastinya teman-teman sudah pernah melihat bentuk atau efek dari gambar yang bisa jalan sendiri atau harus kita swipe atau geser baru pindah, disini kita akan membuatnya seperti itu, dimana sebuah gambar jika kit swipe atau geser akan menampilkan gambar selanjutnya, sangat keren ya, disini untuk belajar cara membuat efek slider sederhana dengan materialize, disini saya menggunakan materialize, dimana saya menyebutnya dengan library, bank, seperti itulah karena disana terdapat tutorial-tutorial yang sangat menarik untuk kita ikuti, oke bagaimana cara pembuatannya, simak terus ya teman-teman.
Cara membuat efek slider sederhana dengan materialize, Kita membutuhkan yang namanya sebuah javascript, tetapi disini kita tidak akan pure membahas satu persatu-satu tentang javascriptnya, kita akan langsung mengambil saja, dari tempatnya yaitu materialize, biasannya kebanyakan orang menyebutnya pakai plugin, jadi kita tinggal ambi-ambil saja seperti kita menggunakan bootstrap, sudah kebayang ya teman-teman, oke langkah pertama yang harus teman-teman siapkan adalah download terlebih dahulu materializenya ada di menu getting started, nanti di sebelah kanan terdapat HTML setup, copy saja buat template teman-teman, oke langsung saja suapaya enak teman-teman langsung liat saja gambar berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat 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 website 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 Membuat 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 website materialize ya teman-teman. oke bagaimana hasilnya:
bisa di lihat ya gambar tersebut terjadi saat saya ingin menggeser gambar sebelah kanan atau kiri maka akan tampil gambar sebelahnya, bagaimana sangat menarik ya teman-teman dan saya rasa cukup sampai disini dulu belajar kita tentang, Cara membuat efek slider sederhana dengan materialize, semoga bermanfaat dan sampai jumpa pada artikel salanjutnya terimakasih.
The post Cara Membuat Efek Slider Sederhana Dengan Materialize appeared first on Kursus Website Terbaik.