Yêu cầu thg 10 3, 2020 2:42 CH 144 0 1
  • 144 0 1
+2

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

Chia sẻ
  • 144 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

Avatar tZoro @subhopefully
thg 10 5, 2020 5:50 SA

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/

thg 10 5, 2020 6:44 SA

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

Avatar tZoro @subhopefully
thg 10 5, 2020 7:00 SA

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

thg 10 5, 2020 7:07 SA

@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?

thg 10 5, 2020 7:10 SA

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

Avatar tZoro @subhopefully
thg 10 5, 2020 7:13 SA

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

thg 10 5, 2020 7:22 SA

@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ó

Avatar tZoro @subhopefully
thg 10 5, 2020 7:31 SA

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

thg 10 5, 2020 7:35 SA

@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á

thg 10 5, 2020 7:35 SA

@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

Avatar tZoro @subhopefully
thg 10 5, 2020 7:38 SA

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

thg 10 5, 2020 7:48 SA

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

thg 10 5, 2020 7:49 SA

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

1 CÂU TRẢ LỜI


Đã trả lời thg 10 4, 2020 2:09 CH
+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à.

Chia sẻ
thg 10 4, 2020 3:52 CH

@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?

thg 10 5, 2020 1:30 SA

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

thg 10 5, 2020 1:42 SA

@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?

thg 10 5, 2020 2:29 SA

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

thg 10 5, 2020 3:46 SA

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

thg 10 5, 2020 4:15 SA

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

thg 10 5, 2020 4:20 SA

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

thg 10 5, 2020 4:23 SA

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

thg 10 5, 2020 4:28 SA

@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?

thg 10 5, 2020 4:50 SA

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

thg 10 5, 2020 7:07 SA

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

thg 10 5, 2020 10:00 SA

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

thg 10 5, 2020 2:00 CH

@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? ​ , ​

thg 10 6, 2020 4:44 SA

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

thg 10 6, 2020 7:23 SA

@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ý.

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí