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

+ 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().

+ .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ệ

Bài viết liên quan

Bài 1: Giới thiệu jQuery và hướng dẫn cài đặt phần mềm Bài 9: Tạo sidenav – side menu bằng jquery Bài 10: Hiệu ứng slide – phần html và css Bài 22: Tạo hiệu ứng chuyển động với thư viện TweenMax