Hỏi cách làm FlashCard trên web bằng HTML, CSS, Javascript

[DucDuong_94 (nonStop)]

mình đang muốn làm 1 trang có FlashCard như ở trang Quizlet trong link này
https://quizlet.com/78279444/flashcards
Nhưng hiện tại không biết nó là gì ? từ khóa nào ? tìm google mãi mà ko thấy source kiểu FlashCard này đâu . thanks for help

[DucDuong_94 (nonStop)]

Không ai biết ạ . đang cần , các thánh hiển linh nào :((

[nhatlonggunz]

Em thì làm thế này:

Trong file html, mình chia ra 2 phần: slide và mũi tên (tất nhiên là vẫn phải có những phần khác cho menu blah blah).

Slide: Để tất cả các slide trong một class lớn, rồi mỗi slide là một div class="slide", trong đó sẽ có 1 slide có class active-slide (để đánh dấu cái slide mà mình đang nhìn thấy):

<div class="slider">
  <div class="slide active-slide">slide 1</div>
  <div class="slide">slide 2</div>
  <div class="slide">slide 3</div>
</div>

Trong file css, mình sẽ để toàn bộ slide như thế này

.slide {
    display: none;
    position: absolute;
}

Xong phần slide

Mũi tên thì có arrow-prev (mũi tên trái) và arrow-next (mũi tên phải) như thế này:

<div class="slider-nav">
      <a href="#" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a>
      <a href="#" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a>
</div>

Bây giờ anh đã có 2 đủ 2 phần, và web của anh chỉ hiện mỗi cái slide nào mà có class active-slide
Vậy ý tưởng là ta sẽ dùng Javascript và jQuery để xử lí vụ bấm mũi tên.
Mỗi khi bấm mũi tên tới (arrow-next), ta dùng removeClass('active-slide') để loại bỏ class active-slide ở cái slide hiện giờ => nó sẽ mất, không hiện ra màn hình
Rồi dùng addClass('active-slide') để thêm class active-slide vào slide tiếp theo => slide tiếp theo hiện ra ảo chưa
Muốn thêm hiệu ứng thì khi removeClass() có thể thêm fadeOut(số mili giây) để nó mờ từ từ đi
Và khi addClass() thì thêm fadeIn(số mili giây) để nó từ từ hiện ra
ảo hông

Làm y như vậy với mũi tên trái (arrow.prev)
VD:

File .js :

var main = function(){
	$('.arrow-next').click(function() {
		var currentSlide = ('.active-slide');
		var nextSlide = currentSlide.next(); // với mũi tên ngược lại thì là .prev()

		currentSlide.fadeOut(600).removeClass('active-slide'); // 600 là thời gian để nó mờ đi 
		nextSlide.fadeIn(600).addClass('active-slide');
	});
}

$(document).ready(main);

Xong

À quên, anh có thể thay cái fadeIn, fadeOut bằng nhiều cái khác (anh search đi, javascript chắc có nhiều lắm)

[DucDuong_94 (nonStop)]

cái này mình tìm rồi , mình ko ưng nó lắm

[DucDuong_94 (nonStop)]

thanks you so much

[mrphu3074 (Nguyễn Phú)]

Làm như quizlet ko có gì khó cả:
Gồm 2 phần:

• pagination để chuyển card, tự viết bằng js thuần ko cần lib
• phần chuyển nội dung của flashcard chỉ là hiệu ứng flip 3d thôi. Có nhiều lib làm dùm bạn phần này

[mrphu3074 (Nguyễn Phú)]

Mình có làm 1 cái demo nhỏ

JS Bin