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

Đăng bởi Admin Cập nhật lần cuối Th9 12, 2019

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.

Nội dung chính

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ệ

jQuery