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

Next to import, there are 2 options: import global or import local.

With import global

With import local

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.

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 properties

    In addition, it also has a different display type such as how many slides are displayed on the total number of slides by adding properties

    or display in numbers

    you can learn more.
  • navigation: button to next or prev slides

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

Share the news now