Bài 12: Hiệu ứng slide – Xử lý nút phân trang

3 1.219

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.

Video – Hiệu ứng slide – Xử lý nút phân trang

Ý tưởng

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

+ 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

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

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.

Liên hệ

Bạn cũng có thể thích
  1. Chính nói

    Anh ơi em muốn chỉ dùng nút phân trang với slide tự chuyển theo khoảng thời gian nhất định thôi thì làm thế nào ạ. Em mới tập làm nên nhìn hơi khó hiểu.

  2. Khánh nói

    Ad ơi, khi bấm thật nhanh vào nút next hoặc pre thì nó bị bug ạ, mong a chỉ cho e hướng khác phục ạ, em cảm ơn!

    1. Admin nói

      Mờ debug lên xem báo lỗi gì

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.