Hoàng Web

Thiết Kế Website WordPress

Trang chủ » Programming » Javascript » Tạo jQuery Slider lặp vô hạn infinite scrolling

Tạo jQuery Slider lặp vô hạn infinite scrolling

by

Sử dụng jquery UI với hàm animate, để tạo slider cuộn dọc lặp vô hạn.

Bài tập 1: Vertical Infinite Scrolling

HTML:

<div id="slideshow">
    <div><img src="http://placehold.it/200x200/cf5&text=1" alt="" /></div>
    <div><img src="http://placehold.it/200x200/f0f&text=2" alt="" /></div>
    <div><img src="http://placehold.it/200x200/444&text=3" alt="" /></div>
    <div><img src="http://placehold.it/200x200/f70&text=4" alt="" /></div>
  </div>

CSS:

#slideshow{
  width:200px;height:200px;
  position:relative;
  overflow:hidden;
}

Javascript:

function loop(){
  $('#slideshow').stop().animate({scrollTop:200},700,'linear',function(){
    $(this).scrollTop(0).find('div:last').after($('div:first', this));
    loop();
  });
}
loop();

Kết quả:

Bài tập 2: Horizonal Infinite Scrolling 1

Trong bài tập này mình cũng chỉ sử dụng jQuery UI core, để cuộn từng đối tượng với kiểu fadeIn.
HTML:

<div id="slides">
<ul>
    <li>
        <img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001t.jpg" />
    </li>
    <li>
        <img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_002t.jpg" />
    </li>
    <li>
        <img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003t.jpg" />
    </li>
    <li>
        <img src="http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005t.jpg" />
    </li>
</ul>
</div>

CSS:

#slides{width:700px; height:225px; overflow:hidden; padding:10px 0px 10px 10px; border:1px solid grey;}
ul {width:200%;}
li {display:inline; margin-right:10px;}

Và thêm đoạn js khởi tạo scrolling.

(function animate() {
    $("#slides li:first").each(function(){
        $(this).animate({marginLeft:-$(this).outerWidth(true)},800,function(){
            $(this).insertAfter("#slides li:last");
            $(this).css({marginLeft:0});
            setTimeout(function(){animate()},100);
        });
    });
})();

Kết quả:

Sử dụng jcarousellite cũng có tính năng tương tự, nhưng chuyên nghiệp và cài đặt khá thuận tiện:

Cài đặt jCarousellite

Bước 1:
Đầu tiên bạn tải thư viện jQuery tại đây và jCarouselLite tại đây.

Nếu bạn muốn cài hiệu ứng thì download thêm Easing plugin.
jCarousel cũng hỗ trợ mouse wheel, sử dụng chuột để next/prev slides, do vậy ban cũng cần chèn thêm mouse-wheel plugin vào page.

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>

<!-- Optional -->
<script type="text/javascript" src="path/to/easing.js"></script>
<script type="text/javascript" src="path/to/mousewheel.js"></script>

Bước 2:
Tạo HTML markup yêu cầu bởi carousel gồm (div, ul) và nút định hướng next/prev. Tuy nhiên bạn không muốn cho hiển thị nút điều khiển cũng không sao.

<button class="prev"><<</button>
<button class="next">>></button>

<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

Bước 3: Thiết lập tính năng slider cho jcarousel bằng cách gọi hàm jquery jCarouselLite.

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

Như vậy là đã xong. Xem demo.
jCarousel hỗ trợ nhiều tính năng có thể làm như:

  • Tự động scroll.
  • Hỗ trợ tính năng Mouse wheel – chuyển slides bằng mouse wheel.
  • Cuộn 2 chiều vertical và horizontal, có thể Ẩn/hiện nút định hướng
  • Sử dụng hiệu ứng jquery effects ngoài.
  • Có thể sử dụng sự kiện jquery tương tác vào jCarousel, ví dụ khi nhấn vô slide sẽ lấy được ảnh của slide đó.
  • Tính năng Phân trang như blog.
    jcarousel-pagination

Chú ý: bạn cần khởi tạo từng jcarousellite một, không được thiết lập nhiều đối tượng jcarousellite với chung một lệnh khởi tạo. Ví dụ nếu có nhiều cấu trúc jcarouselLite cùng tên class ‘.anyClass’, nếu bạn dùng lệnh này bạn có thể gặp phải lỗi xen ảnh trắng cuối cùng cho tất cả các jcarouse.

jQuery(".anyClass").jCarouselLite({
	visible: 1,
	speed: 2000,
	auto:1,
	scroll:1
});

Bạn nên tách riêng lệnh khởi tạo từng jcarouselLite một như thế này.

jQuery(".anyClass").each(function(i,v){
		$(v).jCarouselLite({
			visible: 1,
			speed: 2000,
			auto:1,
			scroll:1
		});
	});

Xem chi tiết thêm: http://www.gmarwaha.com/jquery/jcarousellite.
Ngoài ra, còn có thư viện jCarouse khác với bản jCarouselLite, phiên bản này khác với jcarouselLite là không có tính năng lặp vô hạn, và có một số tính năng mới như thêm class vào nút prev/next…Chi tiết: http://sorgalla.com/jcarousel/

Smooth DIV Scroll

Plugin này cho phép chạy mượt mà như marque trong HTML, nhưng hỗ trợ lặp infinite slides. TÍnh năng chính của Smooth DIV Scroll.

  • Làm việc với các thiết bị di động: iPhone, iPad và Android.
  • Cuộn mượt mà
  • Lặp slides vô hạn infinite hoặc cuộn tới slide cuối cùng nếu bạn muốn.
  • Điều hướng slide bằng touch, nút định hướng (hot spots), mouse wheel.
  • Cuộn nhiều nội dung không chỉ ảnh.
  • Hỗ trợ hiệu ứng Easing.

Trước tiên, bạn tải thư viện Smooth DIV Scroll tại đây.
Thêm các thư viện cần thiết vào head.

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" />
<!-- jQuery library - Please load it from Google API's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download) You can make your own at: http://jqueryui.com/download -->
<script src="jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>

<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
		 You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified -->
	<script src="jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>

Chuẩn bị HTML markup cho Smooth DIV Scroll.

<div id="makeMeScrollable">
		<img src="images/field.jpg" alt="Field" id="field" />
		<img src="images/gnome.jpg" alt="Gnome" id="gnome" />
		<img src="images/pencils.jpg" alt="Pencils" id="pencils" />
		<img src="images/golf.jpg" alt="Golf" id="golf" />
		<img src="images/river.jpg" alt="River" id="river" />
		<img src="images/train.jpg" alt="Train" id="train" />

	</div>

Thêm chút CSS, cho nội dung nằm trên một hàng:

<style type="text/css">
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}

	#makeMeScrollable div.scrollableArea img
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
		/* If you don't want the images in the scroller to be selectable, try the following
		   block of code. It's just a nice feature that prevent the images from
		   accidentally becoming selected/inverted when the user interacts with the scroller. */
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
	}
</style>

Bước cuối cùng, chúng ta thiết lập javascript khởi tạo Smooth DIV Scroll.

<script type="text/javascript">
	// Initialize the plugin with no custom options
	$(document).ready(function () {
		// None of the options are set
		$("div#makeMeScrollable").smoothDivScroll({
			manualContinuousScrolling: false,
			autoScrollingMode: "onStart",
			mousewheelScrolling: "allDirections",
			hotSpotScrolling:false
		});
	});
</script>

Xem demo.
Giải thích tham số:
Thiết lập mousewheelScrolling:"allDirections" cho phép next/prev slides bằng thiết bị mouse wheel có trên chuột. Bạn có thể bật tự động chạy slides bằng cách thiết lập manualContinuousScrolling:false. Hay mặc định có nút điều hướng, nếu không cần sử dụng thì để hotSpotScrolling:false. hotSpot là thuật ngữ chỉ nút điều hướng slides trong Smooth DIV Scroll.
Xem thêm cách dùng các tham số của Smooth DIV Scroll tại đây.

Lưu ý: phải đủ số lượng ảnh hay ảnh phải vượt quá kích thước của khung nhìn thì mới thấy slides chạy. Bạn đừng nhầm tưởng Smooth DIV Scroll không hoạt động nhé.

Chi tiết bạn truy cập vào trang chủ: http://smoothdivscroll.com/ để làm được nhiều hơn với Smooth DIV Scroll.

smoothDivScroll API

Có một số hàm của Smooth DIV Scroll giúp chúng ta tương tác vào đối tượng HTML đã cài đặt smoothDivScroll. Ví dụ bạn có thể dừng scrolling hay start scrolling bằng cú click vào nút.
Sử dụng sự kiện mouseover, mouseout vào vùng slides tạo bởi smooth div scroll, khi dê chuột vào thì dừng slider, đưa chuột ra khỏi slider thì chạy tiếp.

$(document).ready(function() {
$("#makeMeScrollable").smoothDivScroll({
    mousewheelScrolling: true,
    manualContinuousScrolling: true,
    visibleHotSpotBackgrounds: "always",
    autoScrollingMode: "always"
});

// Mouse over
$("#makeMeScrollable").bind("mouseover", function(){
    $("#makeMeScrollable").smoothDivScroll("stopAutoScrolling");
});

// Mouse out
$("#makeMeScrollable").bind("mouseout", function(){
    $("#makeMeScrollable").smoothDivScroll("startAutoScrolling");
});
});

Một số lưu ý

smoothDiv không chỉ cuộn ảnh, mà có thể chứa mọi thành phần HTML khác có thể có. Nhưng có một vấn đề trong quá trình làm mình đã gặp phải là các item không nằm trên một dòng. Nguyên nhân này do sử dụng CSS không đúng, lưu ý: bạn sẽ thêm css float:left vào thẻ bao ngoài cho những đối tượng trong smoothDiv để làm chúng hiển thị trên một dòng chạy, nhưng không được thêm float:left vào thẻ html con chứa trong đối tượng. Điều này sẽ gây smoothDiv tính toán sai về “width”.
Ví dụ, sau đây mình thêm chữ vào cuỗi mỗi ảnh cuộn.
Cấu trúc HTML của smoothDiv như sau:

<div id="makeMeScrollable">
	<a href="http://thegioithungrac.com.vn/mu-bao-ho/mu-bao-ho/">
			<img src="http://thegioithungrac.com.vn/wp-content/uploads/4327124mu__ba_o_ho__ha_n_quo_c_ma_u_xanh-300x257.jpg" style="max-height:86%;max-width:100%;">
		<h4>Mũ bảo hộ</h4>
	</a>
	<a href="http://thegioithungrac.com.vn/pallet-go/pallet-go/">
			<img src="http://thegioithungrac.com.vn/wp-content/uploads/index.jpg" style="max-height:86%;max-width:100%;">
		<h4>Pallet gỗ</h4>
		</a>
	....
</div>

CSS:

/*scrolling*/
#makeMeScrollable
{
	width:97%;
	margin:auto;
	height: 180px;
	position: relative;
	overflow:hidden;
}

#makeMeScrollable div.scrollableArea img,#makeMeScrollable div.scrollableArea a
{
	height:163px;
	position: relative;
	display:inline-block;

	margin: 0;
	padding: 0;
	/* If you don't want the images in the scroller to be selectable, try the following
	   block of code. It's just a nice feature that prevent the images from
	   accidentally becoming selected/inverted when the user interacts with the scroller. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	text-align:center;

}
#makeMeScrollable div.scrollableArea a{margin-top:10px;float: left;}
#makeMeScrollable div.scrollableArea img{
	border: 2px solid #2f201d;
	margin-right:10px;
	margin-left:10px;
}

Nếu bạn sử dụng thêm floaf:left vào #makeMeScrollable div.scrollableArea img, sau khi tải lại trang sẽ thấy các thành phần xếp theo chiều dọc.
Để tự động chỉnh độ rộng của ảnh vừa với container, bạn sử dụng thuộc tính css max-width:100%, max-height:100%. Ở đoạn code trên, vì có thêm chữ ở dưới nên mình để max-height:86%.
Kết quả mình làm được:
smoothDiv-example

Chúc bạn thành công.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI