Demo

Xe hơi đẹp
Hot girl

Demo 2

Album ảnh thiên nhiên

Album ảnh thiên nhiên

Album ảnh thiên nhiên

Album ảnh thiên nhiên - tiêu đề 2

Tải về - Download

Phiên bản 1.2

Phiên bản zip chỉ có file plugin pixel-slide-min.zip

phiên bản 1.2 có bổ sung thêm tùy chọn pageControl để chuyển qua các slide kế tiếp

Cài đặt và sử dụng

Đư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-rightbottom-right

Tùy chọn - Option

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

width Chiều ngang của slide mặc định là 100%
height Chiều cao của slide mặc định là 100%
delayTime Thời gian trễ khi chuyển hình ảnh
mouseEnterStop Sự kiện nếu giá trị "true" dừng chuyển hình ảnh qua lại và ngược lại
pageSlide Cho phép hoặc không cho phép hiển thị nút chuyển nhanh các hình ảnh
pageControl Cho phép hoặc không cho phép hiển thị nút chuyển sang hình ảnh kế tiếp hoặc quay lại hình ảnh trước