Asked Oct 3rd, 2:42 PM 109 0 1
  • 109 0 1
+2

Hỏi về cách custom slide như trang MSN

Share
  • 109 0 1

Cho mình hỏi là mình muốn làm slide như kiểu trang MSN (có slide 2 bài, 3 bài,...): https://www.msn.com/vi-vn/?AR=2 Thì có thư viện nào hỗ trợ không ạ (của vuejs càng tốt)? Hoặc làm tay thì ý tưởng sẽ như thế nào ạ? Mình cảm ơn

Trương Văn Huy @subhopefully
Oct 5th, 5:50 AM

Bạn có thể tạo thumbnail trước rồi đưa thumbnail vào slide rồi sử dụng thôi, coi thử swiper xem https://swiperjs.com/

0
| Reply
Share
Oct 5th, 6:44 AM

@subhopefully mình thấy cái thumb của swiper đâu có custom dc kiểu ý nhỉ b?

0
| Reply
Share
Trương Văn Huy @subhopefully
Oct 5th, 7:00 AM

@bacode bình thường thi họ dùng image, thay vì image thì bạn đưa block div và các phần tử vào đấy, bạn phải code mới thấy.

0
| Reply
Share
Oct 5th, 7:07 AM

@subhopefully còn phần array trả về mình sẽ xử lý trước để lọc ra từng phần à b? B có ý tưởng nào về phần chia các phần tử cho slide hợp lý ko?

0
| Reply
Share
Oct 5th, 7:10 AM

@subhopefully mình đang bí đoạn xử lý đầu vào như nào để tối ưu 😦

0
| Reply
Share
Trương Văn Huy @subhopefully
Oct 5th, 7:13 AM

@bacode Đoạn code bác xử lý như nào

0
| Reply
Share
Oct 5th, 7:22 AM

@subhopefully mình đang tính sẽ chia ra các mảng nhỏ trc và nằm trong 1 mảng lớn. rồi lặp mảng lớn thì check điều kiện để hiển thị component tương ứng với index của nó

0
| Reply
Share
Trương Văn Huy @subhopefully
Oct 5th, 7:31 AM

Thứ tự hiển thị thì bạn xử lý trong mảng trước, còn js chỉ loop thôi

0
| Reply
Share
Oct 5th, 7:35 AM

@subhopefully ừ b. Nhưng mình thấy đoạn mình làm đang xử lý điều kiện trong for nhiều quá

0
| Reply
Share
Oct 5th, 7:35 AM

@subhopefully mới đầu đã mất đoạn xử lý để tách array. rồi lại mất đoạn xử lý để render ở view

0
| Reply
Share
Trương Văn Huy @subhopefully
Oct 5th, 7:38 AM

@bacode nếu tự làm slider thì bạn làm slider demo trước, rồi đưa dữ liệu vào sau, từng bước một đỡ bị rối.

0
| Reply
Share
Oct 5th, 7:48 AM

@subhopefully mình định dùng vue-slick-carousel. thấy có thể tự custom đc

0
| Reply
Share
Oct 5th, 7:49 AM

@subhopefully nhưng đoạn xử lý array đầu vào b có ý kiến gì ko? cho tối ưu?

0
| Reply
Share

1 ANSWERS


Answered Oct 4th, 2:09 PM
+1

Mình nghĩ là cả slider sẽ gồm nhiều slide con, mỗi slide con sẽ là một div. Bên trong div của slide con thì bạn có thể để bất cứ cái gì bạn muốn, bạn chia div này thành 2 phần hay gì đều được mà.

Share
Oct 4th, 3:52 PM

@NgHoang api là 1 mảng chứa nhiều bài viết. Thì điều kiện sẽ check như nào để chia ra ví dụ slide đầu tiên 1 bài, slide tiếp 2 bài, tiếp theo 3 bài,... r lại lặp lại?

0
| Reply
Share
Oct 5th, 1:30 AM

@bacode Bạn lấy thứ tự của div slide con ra. nếu thứ tự (ví dụ tính từ 0) chia hết cho 3 thì là 1 bài, chia 3 dư 1 thì là 2 bài, chia 3 dư 2 thì là 3 bài.

0
| Reply
Share
Oct 5th, 1:42 AM

@NgHoang làm sao mà biết đc có bnhieu slide con nhỉ? với có thư viện nào hỗ trợ cho việc cútom để tính toán kiểu ý ko b?

0
| Reply
Share
Oct 5th, 2:29 AM

@bacode thư viện có sẵn thì mình không biết, bạn thử Google xem. Còn ý tưởng thì bạn có thể làm theo hướng này:

  • Mảng của bạn có n bài.
  • Bạn muốn chia ra slide 1 thì 1 bài, slide 2 thì 2 bài, slide 3 thì 3 bài. Suy ra trong một cụm 3 slide liên tiếp thì có tổng cộng 6 bài.

Bạn lấy n chia cho 6 sẽ ra số cụm 3 bài liên tiếp là:

  • Chia hết thì số slide là: [n6]3[\frac{n}{6}] * 3 (kí hiệu [n6][\frac{n}{6}] là ám chỉ lấy phần nguyên của phép chia n6\frac{n}{6})
  • Chia dư 1 thì số slide là: [n6]3+1[\frac{n}{6}] * 3 + 1 (vì dư 1 bài cuối sẽ cần 1 slide nữa cho bài này)
  • Chia dư 2 thì số slide là: [n6]3+1+1[\frac{n}{6}] * 3 + 1 + 1 (Cần thêm 1 + 1 = 2 slide. Vì dư 2 bài, nhưng slide tiếp theo sau cụm n63\frac{n}{6} * 3 slide kia chỉ chứa được 1 bài, vẫn còn bài thứ 2 phải nhét vào slide tiếp nữa). Bạn cũng có thể quy định trường hợp này thì sẽ nhét chung vào 1 slide thay vì chia đơn ra thành 2 slide.
  • ....

Cứ thế xét các trường hợp số dư thôi. Tất nhiên cách này có hạn chế là nếu bạn muốn slide 1 bài rồi tới slide 2 bài rồi 3 bài rồi 4 bài ... thì xét trường hợp sẽ rất cực.

Ví dụ trên cho bạn dễ hiểu, để đơn giản hơn trong mọi trường hợp thì bạn có thể dùng cách dưới:

  • mảng của bạn có n bài
  • Bạn muốn chia ra slide 1 thì 1 bài, slide 2 thì 2 bài, slide 3 thì 3 bài, ..., slide thứ k thì có k bài. Suy ra trong một cụm k slide liên tiếp thì có tổng cộng k(k+1)2\frac{k*(k+1)}{2} bài.
  • Và trong trường hợp trên thì một slide bất kì sẽ chứa nhiều nhất là k bài.

Bạn vẫn lấy n chia cho k(k+1)2\frac{k*(k+1)}{2}, nhưng lần này chỉ xét 2 trường hợp:

  • Nếu số dư của phép chia trên mà bé hơn k thì bạn nhét hết chúng vào 1 slide luôn. Nên sẽ có ([n:k(k+1)2]k)+1([n : \frac{k*(k+1)}{2}] * k) + 1 slide. (kí hiệu [n:k(k+1)2][n : \frac{k*(k+1)}{2}] là ám chỉ lấy phần nguyên của phép chia n:k(k+1)2n : \frac{k*(k+1)}{2})
  • Nếu số dư của phép chia trên (kí hiệu là là SD) mà lớn hơn k thì phần dư bạn chia ra thành 2 slide, slide đầu sẽ chứa k bài trong phần dư, phần còn lại là (SD - k) bài thì nhét nốt vào 1 slide nữa. Vậy sẽ có ([n:k(k+1)2]k)+2([n : \frac{k*(k+1)}{2}] * k) + 2 slide.

Cách này có thể áp dụng trong mọi trường hợp của k vì ta chỉ cần xét 2 trường hợp con thôi. Và nếu số bài của bạn nhiều thì việc nhét không theo thứ tự kia vào cuối cùng thì cũng chả ảnh hưởng lắm đến trải nghiệm người dùng, người ta cũng ít khi kéo xuống dưới cùng lắm.

+1
| Reply
Share
Oct 5th, 3:46 AM

@NgHoang đoạn dưới mình chưa hiểu n với k lắm. Bạn muốn chia ra slide 1 thì 1 bài, slide 2 thì 2 bài, slide 3 thì 3 bài, ..., slide thứ k thì có k bài. Suy ra trong một cụm k slide liên tiếp thì có tổng cộng n ∗ ( n + 1 ) 2 2 n∗(n+1) ​ bài.

0
| Reply
Share
Oct 5th, 4:15 AM

@NgHoang mình chưa hiểu đoạn xử lý trong mọi trường hợp lắm.

0
| Reply
Share
Oct 5th, 4:20 AM

@bacode mình viết nhầm k với n ở vài chỗ. mình mới sửa lại rồi rồi.

0
| Reply
Share
Oct 5th, 4:23 AM

@bacode đoạn cho mọi trường hợp thì kiểu, bạn cứ chia như bình thường theo thứ tự bạn muốn. Nhưng sẽ xảy ra trường hợp chia xong dư ra vài bài. thì xem số bài còn dư này bé hơn hay lớn hơn k thì xử lý tương ứng. Tại sao lại so với k? Đơn giản vì một slide sẽ có tối đa k bài. Nên nếu số bài dư mà lớn hơn k thì sẽ phải chia số bài dư vào 2 slide. Còn bé hơn k thì tống hết vào 1 slide luôn là xong.

0
| Reply
Share
Oct 5th, 4:28 AM

@NgHoang mà cái này mình áp dụng cho kiểu: slide 1: 1 bài, 2: 2 bài, 3: 3 bài. Rồi 4 thì lại 1 bài, 5:2 bài,... thì có đc ko bạn?

0
| Reply
Share
Oct 5th, 4:50 AM

@bacode mình nghĩ là được. nó cũng như vậy thôi.

0
| Reply
Share
Oct 5th, 7:07 AM

@NgHoang oke để mình thử. tks b nhiều

0
| Reply
Share
Oct 5th, 10:00 AM

@bacode Ok bạn. Nếu được thì bạn đánh dấu câu trả lời của mình là Accepted Answer với nha. Tks bạn..

0
| Reply
Share
Oct 5th, 2:00 PM

@NgHoang n chia cho k∗(k+1)/ 2. Nhưng mình đâu biết k là bnhieu đâu nhỉ? Thật sự thì mình chưa hiểu đoạn set cho mọi trường hợp lắm 😦 Sr b. Nên bạn có thể giải thích cách làm từ lúc nhận vào là 1 array chứa các bài post [{id: 1, content: 'abc'},{id: 2, content: 'bcd'}]. R xử lý nó thế nào ko? ​ , ​

0
| Reply
Share
Oct 6th, 4:44 AM

@NgHoang b có skype ko nhỉ? mình hỏi cho dễ với 😕

0
| Reply
Share
Oct 6th, 7:23 AM

@bacode sory bạn qua mình hơi bận. Mình cũng không phải chuyên mảng Web đâu. Thời gian trước có tự học với làm dự án thôi. Ban đầu mình tưởng k là số bạn đặt, vì mình nghĩ không biết k thì sao mà làm được. k ở đây ý mình là trường hợp tổng quát thôi, bạn chọn số nào cũng được cho phù hợp với kích cỡ Slide.

Còn về nhận vào một mảng như kia thì ví dụ slide 1 chứa 1 bài thì bạn lấy bài đầu tiên trong mảng hiện tại ra, slide k cần k bài thì lấy ra k bài đầu tiên chưa từng được lấy ra trong mảng hiện tại ra thôi. Mỗi khi lấy ra một bài nào thì bạn có thể loại nó ra khỏi danh sách các bài để tiện xử lý.

0
| Reply
Share