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

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ì. 

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

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

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ệ