Create Slideshow with Vue Awesome Swiper
- Tram Ho
Slideshow or slider is a very important part of the website today, in fact, they are a set of images or similar items that can be slid back and forth, they are often placed at the top of the page to describe the content. remarkable page at the time. So today I will introduce to everyone a package to be able to create a slideshow in the simplest way with many different options. vue-awesome-swiper. Let’s get started
Setting
You can install via npm or yarn as follows
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 |
Next to import, there are 2 options: import global or import local.
With 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> |
With 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> |
You can go up this for reference on display, number of slides, slide transition effects. Here’s an example of using SwiperSlide in a 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> |
You can see that the data section has some properties that we can customize to better suit our needs, for example:
- slidesPerView: The default number of slides displayed on the screen will be 1
- slidesPerColumn: The default number of slides displayed on the screen will be 1
- spaceBetween: space between slides
- pagination: the button shows the number of slides that are calculated by (total number of slides/ slidesPerGroup) default “slidesPerGroup” is equal to 1. By default, the buttons will display horizontally, can adjust the vertical display by adding properties12direction: 'vertical',
In addition, it also has a different display type such as how many slides are displayed on the total number of slides by adding properties1234pagination: {type: 'fraction'},
or display in numbers123456pagination: {renderBullet(index, className) {return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`}}
you can learn more. - navigation: button to next or 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> |
It also provides 3D slide transition effects, I see there are quite a lot of beautiful effects people just need to go there and have a sample code that is very easy to use.
Conclude
So I have introduced to you a package to be able to create slideshows easily. My article is for reference only. If you want to learn more, go to its homepage to read it, there is code and illustrative examples that are always very easy to follow. If you find the article useful, please give me an up vote. Thank you again
Refer
https://github.com/surmon-china/vue-awesome-swiper
https://www.npmjs.com/package/vue-awesome-swiper
Please come in this Let’s see an example