Đưa các file sau vào trong thẻ "head

<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

<script type="text/javascript" src="js/pixel-slide.js"></script>
<link rel="stylesheet" href="css/pixel-slide.css" type="text/css" />

Với jquery thì các bạn có thể tùy chọn phiên bản

Cài đặt

- Các bạn sử dụng cú pháp $([tên đối tượng]).pixel_slide();
- Để khởi tạo kèm theo thuộc tính các bạn sử dụng như sau:
$([tên đối tượng]).pixel_slide({
thuộc tính 1: giá trị 1,
thuộc tính 2: giá trị 2,
});

Ví dụ:

<div class="your-css">

	<div class="pixel-slide">
		<div class="content-slide" data-img="images/album/img01.jpg">
			<div class="content-title">
				Xe hơi đẹp
			</div>
		</div>
		<div class="content-slide" data-img="images/album/img02.jpg">
			<div class="content-title">
				Hot girl
			</div>
		</div>
		<div class="content-slide" data-img="images/album/img03.jpg"></div>
		<div class="content-slide" data-img="images/album/img04.jpg"></div>
		<div class="content-slide" data-img="images/album/img05.jpg"></div>
	</div>
	<script type="text/javascript">
		$(".pixel-slide").pixel_slide({
			height: "500px",
			delayTime:5000,
			pageControl:true
		});
	</script>

</div>

Tại phiên bản 1.2 có bổ sung thêm tính năng tiêu đề thông minh khi cài đặt các bạn cần bổ sung thêm thẻ sau với định dạng

<div class="content-slide" data-img="images/album/img16.jpg">
    <div class="caption-smart" data-location="bottom">
        <h3>Album ảnh thiên nhiên</h3>
    </div>
</div>

data-location có 4 tùy chọn cho vị trí hiển thị đó là top, bottom, top-right và bottom-right

Các tùy chọn mặc định

width:"100%",
height:"100%",
delayTime:3000,
mouseEnterStop:false,
pageSlide:true,
pageControl: false

Giải thích