Vue.js cast library popular selection

To create a rotograph, we must dynamically create the display images and add navigation buttons to navigate between them. We may also need autoplay.

It all takes time to build, and there’s a good chance we could use that time for other things. In this article, we’ll take a look at some of vue.js’s roundabout gallery to make our lives a little easier and get some of our precious time back.

vue-easy-slider

Vue-easy-slider is a simple VUE slider component that can be used with a mouse and touch screen. It is customizable and animated.

To use it, we install it by running the following command:

npm i -S vue-easy-slider
Copy the code

We can then use it by writing the following code:

//main.js

import Vue from "vue";
import App from "./App.vue";
import EasySlider from "vue-easy-slider";

Vue.use(EasySlider);
Vue.config.productionTip = false;

new Vue({
  render: h= > h(App)
}).$mount("#app");
Copy the code

//App.vue

<template>
  <div id="app">
    <slider animation="fade">
      <slider-item v-for="(i, index) in list" :key="index">
        <img :src="i">
      </slider-item>
    </slider>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      index: 0.list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `)}; }};</script>
Copy the code

We used the slider component to add the rosette and the animation property to set the animation effect. As the name suggests, slider-item holds the roted-item.

We can also change the style. For example, we can change the width and height by writing:

<template>
  <div id="app">
    <slider animation="fade" width="400px" height="250px">
      <slider-item v-for="(i, index) in list" :key="index">
        <img :src="i">
      </slider-item>
    </slider>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      index: 0.list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `)}; }};</script>
Copy the code

We can also enable or disable touch control and change the speed of slide switching. It also emits events, such as Change, when switching slides. Triggers when the next or previous slide is displayed.

It also has slots for placing placeholders to show something when the slide is loaded.

vue-awesome-swiper

Vue-awesome – Swiper is another easy to use rotation component for the VUE application. It’s based on Swiper, so we had to install it with the package:

npm install swiper vue-awesome-swiper --save
Copy the code

We can then use it by writing the following code:

//app.js

import Vue from "vue";
import App from "./App.vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/css/swiper.css";

Vue.use(VueAwesomeSwiper);
Vue.config.productionTip = false;

new Vue({
  render: h= > h(App)
}).$mount("#app");
Copy the code

//App.vue

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(i, index) in list" :key="index">
        <img :src="i">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `),
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination"}}}; }};</script>
Copy the code

In this case, we use the Swiper component with some options. The Swiper-Slide component holds slides, so we put the image into it. We also pass swiperOptions to the Options property.

We use the Pagination slot to fill in the content and set up a class for the pagination so that it can be styled.

We can also programmatically go to a slide show. This is one of the reasons why we assigned the REF to the slider — move to the desired slide. For example, we could write:

//App.js

<template>
  <div id="app">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(i, index) in list" :key="index">
        <img :src="i">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `),
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination"}}}; },computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {
    this.swiper.slideTo(2.1000.false); }};</script>
Copy the code

We create a computed property using the mySwiper ref assigned to the slider, and then call the slideTo method to change to the slide with the given index. The index is in the first parameter, the second parameter is the delay, and the third parameter indicates whether we want to run the callback. If set to true, it emits an event during the switch.

Like the Vue-easy-Slider, the rotation library is animated.

Slick for Vue.js

The Slick for Vue.js library provided us with another slider. JQuery is a dependency, so we have to install it as well. To install dependencies, run:

npm install jquery vue-slick --save
Copy the code

Next, we can use it by writing the following code:

//main.js

import Vue from "vue";
import App from "./App.vue";
import "slick-carousel/slick/slick.css";

Vue.config.productionTip = false;

new Vue({
  render: h= > h(App)
}).$mount("#app");
//App.vue
Copy the code

//App.vue

<template>
  <slick ref="slick" :options="slickOptions">
    <div v-for="(i, index) in list" :key="index">
      <img :src="i">
    </div>
  </slick>
</template>

<script>
import Slick from "vue-slick";

export default {
  components: { Slick },
  data() {
    return {
      slickOptions: {
        slidesToShow: 1
      },
      list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `)}; },methods: {}};</script>
Copy the code

We registered the plug-in in main.js and imported the CSS, and then used the Slick component to create our rosette diagram. We pass in our slickOptions object and set the slidesToShow property to 1 to show just one slide. Slides are created by rendering images using V-for.

It sends out many events:

We can listen inafterChangeEvent, which is sent after the slide switch
Before the slide switchbeforeChange
Issued when the slider is unmounteddestroy
Triggered when a slide action is performedswipe
There are many

We can also call this.$refs.slick.reslick (); To update our slides, using the latest images if we change the list of images.

vue-flickity

Next up is Vue-Flickity, which gives us a lot of customization options. To install it, we can run:

npm install vue-flickity --save
Copy the code

Let’s take a look at how to use it:

//App.vue

<template>
  <div>
    <flickity ref="flickity" :options="flickityOptions">
     <div class="carousel-cell" v-for="(i, index) in list" :key="index">
      <img :src="i">
    </div>
    </flickity>

    <button @click="previous()">Previous</button>
    <button @click="next()">Next</button>
  </div>
</template>

<script>
import Flickity from "vue-flickity";

export default {
  components: { Flickity},
  data() {
    return {
      flickityOptions: {
        initialIndex: 3.prevNextButtons: false.pageDots: false.wrapAround: true
      },
      list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `)}; },methods: {
    next() {
      this.$refs.flickity.next();
    },

    previous() {
      this.$refs.flickity.previous(); }}};</script>
Copy the code

We add the slider using the Flickity component and can customize it with the Options property. We use it to set up the initial slide through the initialIndex property.

PrevNextButton lets us show or hide the built-in navigation buttons, we can choose whether we want to show the navigation points with pageDots, and wrapAround means to go back to the first or last slide when we reach the end or start of the round diagram.

We also added some custom buttons for navigation. We created a button to navigate to the previous slide and a button to navigate to the next slide. Ref gets ref, let’s call the next or last method to move to the next or last slide, respectively.

We can use CSS to style the rounds and slides. It adds the round to the Carousel-Cell class so that we can style it. The built-in navigation buttons and dots also have their classes, which means we can easily set styles.

Vue Carousel 3D

Vue Carousel 3D is an interesting slider. It shows slides in 3D instead of 2D. As we browse through the slide, the slide being displayed is created in front of the other slides, and when we flip the slide, it shows the rotation effect.

To install it, we run:

npm install -S vue-carousel-3d
Copy the code

To use it, we write:

//main.js

import Vue from "vue";
import App from "./App.vue";
import Carousel3d from "vue-carousel-3d";

Vue.use(Carousel3d);
Vue.config.productionTip = false;

new Vue({
  render: h= > h(App)
}).$mount("#app");
Copy the code

//App.vue

<template>
  <div>
    <carousel-3d>
      <slide v-for="(i, index) in list" :key="index" :index="index">
        <img :src="i">
      </slide>
    </carousel-3d>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: Array(5)
        .fill()
        .map((_, i) = > `http://lorempixel.com/400/200/sports/${i}/ `)}; }};</script>
Copy the code

We used the Carousel-3D component to add the round, and then the Slide component to add the slide. We pass in the index to place the slide correctly. Built-in 3D styling.

In addition, it has some customization options. We can:

useautoplayProp Enables or disables auto play
Change the bias so that the bias is greater when the number of slides is even
Set an infinite loop for the rotation
Adjust the width and height
Customize slide distance and control width and height

conclusion

Most of the libraries are very similar, but Vue Carousel 3D is undoubtedly the most unique. Everything else is two-dimensional and has similar customization options.

They have similar performance and are both easy to use. Both can be used on a touch screen, and both have animated effects.

Slick for Vue.js sends out a lot of events, so if we need to do something when a slide change or something like that happens, then we should go with that library. Slick for vue.js is also useful if we want to show multiple slides per page.

Source: Blog.logrocket.com, translated by John Au-Yeung: Official account “Front-end Full Stack Developer”

Vue.js cast library popular selection

vue-easy-slider

vue-awesome-swiper

Slick for Vue.js

vue-flickity

Vue Carousel 3D

conclusion

Related Posts

[JS engine] parsing process | More challenges in August

Redux

Flutter Series 1-DART Foundation Notes