Membuat Button Control Slider Dengan Materialize CSS

Pada kesempatan ini saya akan membagikan tutorial tentang Cara Membuat Button Control Slider Dengan Materialize CSS. Dalam membuat Design website sangat penting dalam menggunakan framework atau tools yang mudah digunakan serta mendukung dalam pengerjaan website kita. Jadi dalam kasus ini bagaimana cara membuat button control atau tombol untuk mengerakan slider.

Oleh karena itu sekarang kita akan menggunakan framework css yaitu Materialize CSS. Pada documentasi framework Material CSS tidak jauh berbeda dengan Framework CSS lainnya yang menyediakan banyak element-element sesuai kebutuhan untuk design website. Baiklah langsung saja kita mulai cara membuat yuk simak langkah-langkah berikut :

Langkah Pertama

Siapkan terlebih dahulu gambar untuk slider dengan ukuran 700px x 400px , kemudian buka text editor dan buat struktur HTML seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Button Control Slider Menggunakan Materialize CSS</title>
	<!-- Library jQuery -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<!-- Library CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Library JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
            
</head>
<body>
	<div class="container">
		<div class="card">
			<div class="card-action teal accent-4 white-text">
				<h3 class="center-align">Membuat Button Control Slider</h3>
			</div>
		</div>
		<div class="carousel carousel-slider" data-indicators="true">
			<a href="#one!" class="carousel-item"><img src="slide/slide-1.png" alt=""></a>
			<a href="#two!" class="carousel-item"><img src="slide/slide-2.png" alt=""></a>
			<a href="#three!" class="carousel-item"><img src="slide/slide-3.png" alt=""></a>
			<a href="#four!" class="carousel-item"><img src="slide/slide-4.png" alt=""></a>
			<a href="#five!" class="carousel-item"><img src="slide/slide-5.png" alt=""></a>
		</div>
		<br>
		<div class="center-align">
		<div class="btn teal waves-effect prev">Prev</div>
		<div class="btn teal waves-effect next">Next</div>
		</div>
	</div>
</body>
</html>

pada code diatas saya akan menampilkan 5 buah gambar pada slider. dan jangan lupa library materialize css dalam tag head.

Langkah Kedua

Tambahkan script jQuery supaya button next dan prev bisa berfungsi, yang didalamnya berikan function event click. Silahkan ketikkan script dibawah ini:

<script1>
    	$(document).ready(function(){
    		$('.carousel').carousel();

    		// membuat fungsi untuk klik prev
    		$('.prev').click(function(){
    				$('.carousel').carousel('prev');
    			});

    		// membuat fungsi untuk klik next
    			$('.next').click(function(){
    				$('.carousel').carousel('next');
    			});
    	});
    </script1>

Jika sudah jangan lupa simpan dan buka pada browser masing-masing untuk melihat hasilnya coba klik button next atau prev apakah sudah berfungsi.

Saya kira cukup pembahasan artikel kali ini tentang Cara Membuat Button Control Slider Dengan Materialize CSS. Semoga bermanfaat dan selamat mencoba.

Membuat Button Control Slider Dengan Materialize CSS

Kategori