Vueper Slides Library —Slides Breakpoints, Heights, and Gaps
Tags: vue, webdev, programming, javascript
Published: 2021-01-20 23:30:00

**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.