Slide show product với scrollLeft và animate của Jquery

• 19-09-2015 20:33:54
• by:

Bài này, Baobinh.net xin được hướng dẫn các bạn làm một slideshow carousel đơn giản với scrollLeft và animate của Jquery. 

Để không mất thời gian của các bạn, chúng ta sẽ đi ngay vào code:

Thư viện Jquery tất nhiên là phải có rồi @@: 

<script src="http://www.baobinh.net/js/jquery.js"></script>

Phần HTML hiển thị ảnh trong slideshow:

<div class="main">
	<h1>Demo Làm slide show product với scrollLeft và animate của Jquery</h1>
	<!-- Div tags và images ở đây được dùng css từ file css/style.css -->
	<div class="element" id="makeScrollAble">	
		<div class="wrapper">
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
			<div class="item">
				<img src="images/product-03.jpg" />
				<a>Tiêu đề sản phẩm</a>
			</div>
		</div>
		<img class="left-arrow icon-arrow" src="images/left-arrow.png" />
		<img class="right-arrow icon-arrow" src="images/right-arrow.png" />
	</div>
</div>

Tiếp theo phần css style cho slideshow về dạng như ảnh dưới: 

.main {
	float: left; width: 1000px; background-color: #8e8e8e; position: relative; /*Cái này để relative để 2 cái button arrow nó đối chiếu vị trí theo*/
}
h1 {
	color: white;
}
/* Style cho the div chi hien 1 số phần tử bao ngoai va an scroll x, y */
.element {
	width: 970px;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	height: 300px;	
	overflow: hidden;
}
/* Dinh chieu rong cho the bao cac item chua du het cac item tren 1 dong */ 
.element .wrapper {
	width: 1680px;
	float: left;
}
/*Định style cho sản phẩm*/
.element .item {
	width: 190px;
	margin-right: 20px;
	float: left;
	height: 250px;
}

.element .item img {
	width:100%;
	height: 100%;
	
}
/* Style cho icon arrow chung */
.element   img.icon-arrow{ 
	width: 50px;
	position: absolute;
	z-index: 999;
	cursor: pointer;
}
/*Định vị trí icon arrow left */
.element   img.icon-arrow.left-arrow{ 
	left:30px;
	top: 200px;
}
/*Định vị trí icon arrow right là absolute so với class main */
.element  img.icon-arrow.right-arrow{ 
	left:930px;
	top: 200px;
}

Cuối cùng là code javascript:

$(document).ready(function(){
	$(".left-arrow").click(function(){
		$("#makeScrollAble").animate({
			scrollLeft: "-=210"
		},800);
	});
	$(".right-arrow").click(function(){
		$("#makeScrollAble").animate({
			scrollLeft: "+=210"
		},800);
	});
});

Nếu các bạn ghép vào đúng, slideshow của bạn sẽ chạy đúng theo phần Xem link demo

Tải code mẫu link site baobinh.net: Tại đây

Password giải nén file: baobinh.net

Nếu dùng chrome có thể sẽ bị cảnh báo file nguy hiểm do nén zip. Anh em cứ tải về yên tâm nhé

---

• Posted by
• 2015-09-19 20:32:18