Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

With the Vueper Slides library, we can add a carousel to our Vue app easily.

In this article, we’ll look at how to use it to add a carousel to our Vue app.

Breakpoints

We can set the breakpoints to make a responsive slider.

To do that, we can write:

<template>
  <div id="app">
    <vueper-slides :breakpoints="breakpoints">
      <vueper-slide
        v-for="i in 10"
        :key="i"
        :title="i.toString()"
        :style="`background-color: ${['#ff5252', '#42b983'][i % 2]}`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide },
  data: () => ({
    breakpoints: {
      1200: {
        slideRatio: 1 / 5
      },
      900: {
        slideRatio: 1 / 3
      },
      600: {
        slideRatio: 1 / 2,
        arrows: false,
        bulletsOutside: true
      },
      1100: {
        slideRatio: 1 / 4
      }
    }
  })
};
</script>

We change the slideRatio according to the breakpoints listed in the keys of the breakpoints reactive property.

Dragging Distance and Prevent Y-Axis Scroll

We can set the dragging distance with the dragging-distance prop.

To prevent y-axis scrolling, we add the prevent-y-scroll prop:

<template>
  <div id="app">
    <vueper-slides :dragging-distance="70" prevent-y-scroll>
      <vueper-slide
        v-for="i in 10"
        :key="i"
        :title="i.toString()"
        :style="`background-color: ${['#ff5252', '#42b983'][i % 2]}`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide }
};
</script>

The dragging distance is in pixels.

Parallax Effect

We can add a parallax effect with the parallax and parallax-fixed-content props:

<template>
  <div id="app">
    <vueper-slides parallax parallax-fixed-content>
      <vueper-slide
        v-for="i in 10"
        :key="i"
        :title="`title ${i}`"
        :image="`https://picsum.photos/id/${i}/400/300`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide }
};
</script>

Fixed Height

The heights of the slides can be fixed with the fixed-height prop:

<template>
  <div id="app">
    <vueper-slides :slide-ratio="1 / 2" fixed-height="500px">
      <vueper-slide
        v-for="i in 10"
        :key="i"
        :title="`title ${i}`"
        :image="`https://picsum.photos/id/${i}/400/300`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide }
};
</script>

We set the aspect ratio of the slide with the aspect-ratio prop and the fixed-height prop sets the height in pixels.

Slide Image Inside

The slide-image-inside prop lets us put the image in a div in the slide container instead of the container itself:

<template>
  <div id="app">
    <vueper-slides slide-image-inside>
      <vueper-slide
        v-for="i in 10"
        :key="i"
        :title="`title ${i}`"
        :image="`https://picsum.photos/id/${i}/400/300`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide }
};
</script>

Show Multiple Slides and Gap

We can add a gap between the slides. For example, we can write:

<template>
  <div id="app">
    <vueper-slides
      :visible-slides="3"
      slide-multiple
      :gap="3"
      :slide-ratio="1 / 4"
      :dragging-distance="200"
      :breakpoints="{ 800: { visibleSlides: 2, slideMultiple: 2 } }"
    >
      <vueper-slide
        v-for="i in 10"
        :key="i"
        :title="`title ${i}`"
        :image="`https://picsum.photos/id/${i}/400/300`"
      />
    </vueper-slides>
  </div>
</template>

<script>
import { VueperSlides, VueperSlide } from "vueperslides";
import "vueperslides/dist/vueperslides.css";

export default {
  name: "App",
  components: { VueperSlides, VueperSlide }
};
</script>

to add a gap with the gap prop. The slide gap is in pixels.

dragging-distance has the dragging distance.

breakpoints has an object with the breakpoints in the keys and we set the number of slides to show with the visibleSlides and slideMultiple properties.

Conclusion

We can set breakpoints, gaps in slides, and make the height fixed with the Vueper Slides Vue carousel package.

Vueper Slides Library —Slides Breakpoints, Heights, and Gaps