the-zlider v0.3.0

Install

npm i the-zlider

Inside nuxt.config.ts add

  modules: ["the-zlider"]

Use:

TheZliderItems makes use of scoped slots

  const zliderProps = {
    mounted: true, // optional
    perView: 2,
    gap: 32,
    startAt: 0, // optional
    breakpoints: {
      456: {
        perView: 4,
        gap: 24,
      },
      950: {
        perView: 4,
        gap: 24,
      },
    },
  };

  <TheZlider v-bind="zliderProps" :key="i">
    <TheZliderItems :items="[1,2,3]" v-slot="slideData">
      <p>My Slider number  {{ slideData.slide }} </p>
    </TheZliderItems>
    <TheZliderArrows />
    <TheZliderPagination />
  </TheZlider>