Belajar JQuery : Membuat Content Slider Dengan JQuery Bagi Pemula

14 November 2016

Belajar JQuery : Membuat Content Slider Dengan JQuery Bagi Pemula

Nah untuk tulisan pertama saya di sini saya akan membahas mengenai Javascript tepatnya JQuery .Di sini nanti akan di jelaskan bagaimana langkah mudah dalam membuat content slider dengan memanfaatkan JQuery.

Tidak perlu berlama-lama langsung saja kita masuk ke langkah-langkah tutorialnya :

Pertama buat sebuah folder kerja kita di dalamnya buat folder css, img, js dan juga file index.html
Untuk langkah awal kita buat dulu script dari Javascript yang akan kita gunakan. Buat file script.js dan tulis coding seperti di bawah ini

        $(document).ready(function(){
	// Set Options
	var speed = 500;			// Fade speed
	var autoswitch = true;		// Auto slider options
	var autoswitch_speed = 4000	// Auto slider speed
	
	// Add initial active class
	$('.slide').first().addClass('active');
	
	// Hide all slides
	$('.slide').hide();
	
	// Show first slide
	$('.active').show();
	
	// Next Handler
	$('#next').on('click', nextSlide);
	
	// Prev Handler
	$('#prev').on('click', prevSlide);
	
	// Auto Slider Handler
	if(autoswitch == true){
		setInterval(nextSlide,autoswitch_speed);
	}
	
	// Switch to next slide
	function nextSlide(){
		$('.active').removeClass('active').addClass('oldActive');
		if($('.oldActive').is(':last-child')){
			$('.slide').first().addClass('active');
		} else {
			$('.oldActive').next().addClass('active');
		}
		$('.oldActive').removeClass('oldActive');
		$('.slide').fadeOut(speed);
		$('.active').fadeIn(speed);
	}
	
	// Switch to prev slide
	function prevSlide(){
		$('.active').removeClass('active').addClass('oldActive');
		if($('.oldActive').is(':first-child')){
			$('.slide').last().addClass('active');
		} else {
			$('.oldActive').prev().addClass('active');
		}
		$('.oldActive').removeClass('oldActive');
		$('.slide').fadeOut(speed);
		$('.active').fadeIn(speed);
	}
        });
	
	// Show first slide
	$('.active').show();
	
	// Next Handler
	$('#next').on('click', nextSlide);
	
	// Prev Handler
	$('#prev').on('click', prevSlide);
	
	// Auto Slider Handler
	if(autoswitch == true){
		setInterval(nextSlide,autoswitch_speed);
	}

Dengan begini scrip.js telah selesai .Pasti paham kan dengan membaca fungsi dari masing-masingnya.
Berikutnya kita buat style dari content slider kita dengan memanfaatkan css. Buat file style.css lalu tulis seperti berikut ini

*{
	margin:0;
	padding:0;
}

body{
	font-family:'Arial', sans-serif;
	font-size:14px;
	color:#fff;
	background:#333;
	line-height:1.6em;
}

a{
	color:#fff;
	text-decoration:none;
}

h1{
	text-align:center;
	margin-bottom:20px;
}

#container{
	width:980px;
	margin:40px auto;
	overflow:hidden;
}

#slider{
	width:940px;
	height:350px;
	position:relative;
	overflow:hidden;
	float:left;
	padding:3px;
	border:#666 solid 2px;
	border-radius:5px;
}

#slider img{
	width:940px;
	height:350px;
}

.slide{
	position:absolute;
}

.slide-copy{
	position:absolute;
	bottom:0;
	left:0;
	padding:20px;
	background:7f7f7f;
	background: rgba(0,0,0,0.5);
}

#prev, #next{
	float:left;
	margin-top:130px;
	cursor:pointer;
	position:relative;
	z-index:100;
}

#prev{
	margin-right:-45px;
}

#next{
	margin-left:-45px;
}

Pemanfaatan JQuery nya udah, membuat css style nya udah. Sekarang membuat index.html

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery Content Slider</title>
		<link rel="stylesheet" href="css/style.css">
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="js/script.js"></script>
	</head>
	<body>
		<div id="container">
			<header>
				<h1>jQuery Content Slider</h1>
			</header>
			<img src="img/arrow-left.png" alt="Prev" id="prev">
			<div id="slider">
				<div class="slide">
					<div class="slide-copy">
						<h2>Slider One</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
					</div>
					<img src="img/slide1.jpg">
				</div>
				
				<div class="slide">
					<div class="slide-copy">
						<h2>Slider Two</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
					</div>
					<img src="img/slide2.jpg">
				</div>
				
				<div class="slide">
					<div class="slide-copy">
						<h2>Slider Three</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
					</div>
					<img src="img/slide3.jpg">
				</div>
				
				<div class="slide">
					<div class="slide-copy">
						<h2>Slider Four</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
					</div>
					<img src="img/slide4.jpg">
				</div>
				
				<div class="slide">
					<div class="slide-copy">
						<h2>Slider Five</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae commodo sem. Integer eros nibh, molestie congue elementum quis, mattis nec tortor. Vivamus sed hendrerit sed vitae orci convallis.</p>
					</div>
					<img src="img/slide5.jpg">
				</div>
			</div>
			<img src="img/arrow-right.png" alt="Next" id="next">
		</div>
	</body>
</html>