Bài 11: Hiệu ứng slide – Xử lý nút next và prev bằng jquery

Trong bài này, mình sẽ tiếp tục hoàn thiện hiệu ứng slide – xử lý nút next và prev.

Video – Hiệu ứng slide – Xử lý nút next và prev bằng jquery

Ý 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".

+ Bắt sự kiện click và addClass cho các slide. Các hiệu ứng sẽ được tùy chỉnh trong css bằng các thuộc tính animation.

+ Khi đến slide cuối cùng, kiểm tra xem còn slide sau không. Nếu không trở về slide 1.

+ Dùng hàm one() để hiệu ứng đẹp hơn. Sau khi addClass active cho slide, ch1ng ta mới cho nó chuyển động. Hàm one có tác dụng chờ 1 hàm xử lý xong mới xử lý tiếp.

Kiến thức mới

+ Hàm one(): khi một hàm chạy xong, sau đó mới chạy hàm trong one().

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

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 mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ .length để kiểm tra thẻ html có hay không?

Hướng dẫn chi tiết

Phần jQuery

Các lưu ý: mình chỉ hướng dẫn nút next, phần còn lại các bạn tự làm hoặc xem code mẫu download bên dưới nhé.

$(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');
         });
      }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');
         });
      }
   });
});

Phần CSS cho các animation

.bien-mat-ben-trai{
   animation: bien-mat-ben-trai 1s forwards;
}
@-webkit-keyframes bien-mat-ben-trai{
   from{
      transform: translateX(0%);
   }
   to{
      transform: translateX(-100%);
   }
}
.di-vao-ben-phai{
   animation: di-vao-ben-phai 1s forwards;
}
@-webkit-keyframes di-vao-ben-phai{
   from{
      transform: translateX(100%);
   }
   to{
      transform: translateX(0%);
   }
}
/*xử lý nút prev*/
.bien-mat-ben-phai{
   animation: bien-mat-ben-phai 1s forwards;
}
@-webkit-keyframes bien-mat-ben-phai{
   from{
      transform: translateX(0%);
   }
   to{
      transform: translateX(100%);
   }
}
.di-vao-ben-trai{
   animation: di-vao-ben-trai 1s forwards;
}
@-webkit-keyframes di-vao-ben-trai{
   from{
      transform: translateX(-100%);
   }
   to{
      transform: translateX(0%);
   }
}

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ệ