Tạo Slideshow với Vue Awesome Swiper
- Tram Ho
Slideshow hay slider là một phần rất quan trọng trong website hiện nay, thực chất thì chúng là một bộ chứa những hình ảnh hoặc các item tương tự nhau có thể trượt qua lại , chúng thường được đặt ở đầu trang để mô tả những nội dung đáng chú ý của trang vào thời điểm đó. Vì thế hôm nay mình sẽ giới thiệu đến mọi người một package để có thể tạo được sildeshow một cách đơn giản nhất với nhiều tùy chọn khác nhau đó là vue-awesome-swiper. Bắt đầu luôn nhé
Cài Đặt
Bạn có thể cài đặt thông qua npm hoặc yarn như sau
1 2 3 4 5 | npm install swiper vue<span class="token operator">-</span>awesome<span class="token operator">-</span>swiper <span class="token operator">--</span>save # or yarn add swiper vue<span class="token operator">-</span>awesome<span class="token operator">-</span>swiper |
Tiếp theo là import thì có 2 lựa chọn là import global hoặc là import local.
Với import global
1 2 3 4 5 6 7 | <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> VueAwesomeSwiper <span class="token keyword">from</span> <span class="token string">'vue-awesome-swiper'</span> <span class="token keyword">import</span> <span class="token string">'swiper/css/swiper.css'</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueAwesomeSwiper<span class="token punctuation">,</span> <span class="token comment">/* { default options with global component } */</span><span class="token punctuation">)</span> |
Với import local
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Swiper<span class="token punctuation">,</span> SwiperSlide<span class="token punctuation">,</span> directive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-awesome-swiper'</span> <span class="token keyword">import</span> <span class="token string">'swiper/css/swiper.css'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components<span class="token operator">:</span> <span class="token punctuation">{</span> Swiper<span class="token punctuation">,</span> SwiperSlide <span class="token punctuation">}</span><span class="token punctuation">,</span> directives<span class="token operator">:</span> <span class="token punctuation">{</span> swiper<span class="token operator">:</span> directive <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Các bạn có thể lên đây để tham khảo về cách hiển thị, số lượng slide, hiệu ứng chuyển slide. Đây là một ví dụ về sử dụng SwiperSlide trong component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>swiper <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"swiper"</span> <span class="token operator">:</span>options<span class="token operator">=</span><span class="token string">"swiperOption"</span><span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">4</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">5</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">6</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">7</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">8</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">9</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span>Slide <span class="token number">10</span><span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">-</span>slide<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"swiper-pagination"</span> slot<span class="token operator">=</span><span class="token string">"pagination"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Swiper<span class="token punctuation">,</span> SwiperSlide <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-awesome-swiper'</span> <span class="token keyword">import</span> <span class="token string">'swiper/css/swiper.css'</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'swiper-example-multiple-slides-per-biew'</span><span class="token punctuation">,</span> title<span class="token operator">:</span> <span class="token string">'Multiple slides per view'</span><span class="token punctuation">,</span> components<span class="token operator">:</span> <span class="token punctuation">{</span> Swiper<span class="token punctuation">,</span> SwiperSlide <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> swiperOption<span class="token operator">:</span> <span class="token punctuation">{</span> slidesPerView<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> spaceBetween<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> pagination<span class="token operator">:</span> <span class="token punctuation">{</span> el<span class="token operator">:</span> <span class="token string">'.swiper-pagination'</span><span class="token punctuation">,</span> clickable<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
Các bạn có thể thấy phần data có một số thuộc tính chúng ta có thể tùy chỉnh đề phù hợp với nhu cầu của mình hơn ví dụ như:
- slidesPerView: số lượng slides hiển thị trên màn hình mặc định sẽ là 1
- slidesPerColumn: số côt slides hiển thị trên màn hình mặc định sẽ là 1
- spaceBetween: khoảng cách giữa các slides
- pagination: nút hiển thị số lượng trượt hết các slide được tính bằng (tổng số slides/ slidesPerGroup) mặc định “slidesPerGroup” bằng 1. Mặc đinh thì các nút sẽ hiển thị ngang, có thể điều chỉnh hiện thị dọc bằng cách thêm thuộc tính12direction: 'vertical',
ngoài ra nó còn có kiểu hiển thị khác như hiện ở slide bao nhiêu trên tổng số slide bằng cách thêm thuộc tính1234pagination: {type: 'fraction'},
hay hiển thị bằng số123456pagination: {renderBullet(index, className) {return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`}}
các bạn có thể tìm hiểu thêm. - navigation: button để next hay prev slides
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>swiper <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"swiper"</span> <span class="token operator">:</span>options<span class="token operator">=</span><span class="token string">"swiperOption"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"swiper-button-prev"</span> slot<span class="token operator">=</span><span class="token string">"button-prev"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"swiper-button-next"</span> slot<span class="token operator">=</span><span class="token string">"button-next"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>swiper<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> navigation<span class="token operator">:</span> <span class="token punctuation">{</span> nextEl<span class="token operator">:</span> <span class="token string">'.swiper-button-next'</span><span class="token punctuation">,</span> prevEl<span class="token operator">:</span> <span class="token string">'.swiper-button-prev'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Nó còn cung cấp các hiệu ứng chuyển slide 3D mình thấy có khá nhiều hiệu ứng đẹp mắt mọi người chỉ việc lên đó xem và đã có code mẫu rất dễ sử dụng .
Kết Luận
Như vậy là mình đã giới thiệu đến các bạn về một package để có thể tạo ra nhưng slideshow một cách dễ dàng rồi. bài viết của mình chỉ mạng tính chất tham khảo giới thiệu các bạn muốn tìm hiểu sâu hơn thì hãy lên trang chủ chủ của nó để đọc nhé có sẵn code và ví dụ minh họa luôn rất dễ để làm theo. Nếu thấy bài viết hữu ích thì hãy cho mình một up vote nhé. Một lầ nữa cảm ơn các bạn
Tham khảo
https://github.com/surmon-china/vue-awesome-swiper
https://www.npmjs.com/package/vue-awesome-swiper
Các bạn hãy vào đây để xem ví dụ nhé