Trong bài này, chúng ta sẽ hoàn thành hiệu ứng slide – xử lý nút phân trang. Nút phân trang sẽ tương ứng với các slide. Khi slide chuyển thì nút cũng chuyển. Ngoài ra, khi click vào nút thì slide cũng chuyển.
Nội dung chính
Video – Hiệu ứng slide – Xử lý nút phân trang
Ý tưởng
+ Vẫn là addClass và removeClass cho nút khi click vào nút next và prev
+ Khi click vào nút thì chuyển slide bằng addClass và removeClass
Phần này hơi phức tạp, các bạn nên xem chi tiết video nhé.
Hướng dẫn chi tiết và code mẫu
Phần jquery
Code mình đã giải thích trong video nhé. Hơi phức tạp và dài dòng.
$(document).ready(function() {
$('#btn-next').click(function(event) {
var slide_sau = $('.active').next();
if(slide_sau.length!=0){
$('.active').addClass('bien-mat-ben-trai').one('webkitAnimationEnd', function(event) {
$('.bien-mat-ben-trai').removeClass('bien-mat-ben-trai').removeClass('active');
});
slide_sau.addClass('active').addClass('di-vao-ben-phai').one('webkitAnimationEnd', function(event) {
$('.di-vao-ben-phai').removeClass('di-vao-ben-phai');
});
// xử lý nút
$('.nut-slide ul li').removeClass('active_nut');
$('.nut-slide ul li:nth-child('+(vi_tri_hien_tai+1)+')').addClass('active_nut');
}else{
$('.active').addClass('bien-mat-ben-trai').one('webkitAnimationEnd', function(event) {
$('.bien-mat-ben-trai').removeClass('bien-mat-ben-trai').removeClass('active');
});
$('.slide:first-child').addClass('active').addClass('di-vao-ben-phai').one('webkitAnimationEnd', function(event) {
$('.di-vao-ben-phai').removeClass('di-vao-ben-phai');
});
// xử lý nút
$('.nut-slide ul li').removeClass('active_nut');
$('.nut-slide ul li:nth-child(1)').addClass('active_nut');
}
});
});
Phần các nút phân trang
$('.nut-slide ul li').click(function(event) {
clearInterval(autoLoad);
var vi_tri_hien_tai = $('.active_nut').index()+1;
var vi_tri_click = $(this).index()+1;
$('.nut-slide ul li').removeClass('active_nut');
$(this).addClass('active_nut');
if(vi_tri_click>vi_tri_hien_tai){
$('.active').addClass('bien-mat-ben-trai').one('webkitAnimationEnd', function(event) {
$('.bien-mat-ben-trai').removeClass('bien-mat-ben-trai').removeClass('active');
});
$('.slide:nth-child('+vi_tri_click+')').addClass('active').addClass('di-vao-ben-phai').one('webkitAnimationEnd', function(event) {
$('.di-vao-ben-phai').removeClass('di-vao-ben-phai');
});
}
if(vi_tri_click<vi_tri_hien_tai){
$('.active').addClass('bien-mat-ben-phai').one('webkitAnimationEnd', function(event) {
$('.bien-mat-ben-phai').removeClass('bien-mat-ben-phai').removeClass('active');
});
$('.slide:nth-child('+vi_tri_click+')').addClass('active').addClass('di-vao-ben-trai').one('webkitAnimationEnd', function(event) {
$('.di-vao-ben-trai').removeClass('di-vao-ben-trai');
});
}
});
Ngoài ra, nếu chúng ta muốn slide tự chạy, và ngưng tự chạy khi người udn2g click nút thì thêm đoạn code sau
var autoLoad= setInterval(function(){
$('#btn-next').trigger('click');
},3000);
Bạn thêm clearInterval vào các sự kiện click nhé.
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
