@sswq2020/vue-carousel/dist/vue-carousel.es.js

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

import { ref as B, defineComponent as y, toRefs as P, watch as f, createVNode as s, openBlock as w, createElementBlock as I, createElementVNode as d, onUnmounted as X, useSlots as A } from "vue";
function k(o = 1) {
  const e = B(o);
  return {
    pageIndex: e,
    setPageIndex: (r) => {
      e.value = r;
    },
    prePage: () => {
      e.value = e.value - 1;
    },
    nextPage: () => {
      e.value = e.value + 1;
    }
  };
}
const p = /* @__PURE__ */ y({
  name: "XCarouselIndicator",
  props: {
    modelValue: {
      type: Number
    },
    count: {
      type: Number
    }
  },
  emits: ["update:modelValue"],
  setup(o, {
    emit: e,
    slots: t
  }) {
    const {
      modelValue: n
    } = P(o), {
      pageIndex: l,
      setPageIndex: r
    } = k(n.value), u = Array.from(new Array(o.count).keys());
    return f(n, (a) => {
      console.log("newVal", a), l.value = a;
    }), f(l, (a) => {
      e("update:modelValue", a);
    }), () => s("div", {
      class: "x-carousel-indicator"
    }, [t.default ? t.default({
      pageIndex: l.value,
      setPageIndex: r
    }) : u.map((a, i) => s("div", {
      class: `x-carousel-indicator-item${l.value === i + 1 ? " active" : ""}`,
      onClick: () => r(i + 1)
    }, null))]);
  }
}), C = (o, e) => {
  const t = o.__vccOpts || o;
  for (const [n, l] of e)
    t[n] = l;
  return t;
}, N = {}, T = {
  width: "18px",
  height: "18px",
  viewBox: "0 0 16 16",
  version: "1.1"
}, b = /* @__PURE__ */ d("g", {
  stroke: "none",
  "stroke-width": "1",
  fill: "none",
  "fill-rule": "evenodd"
}, [
  /* @__PURE__ */ d("polygon", {
    fill: "#293040",
    "fill-rule": "nonzero",
    points: "10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
  })
], -1), z = [
  b
];
function E(o, e) {
  return w(), I("svg", T, z);
}
const _ = /* @__PURE__ */ C(N, [["render", E]]), R = {}, U = {
  width: "18px",
  height: "18px",
  viewBox: "0 0 16 16",
  version: "1.1"
}, L = /* @__PURE__ */ d("g", {
  stroke: "none",
  "stroke-width": "1",
  fill: "none",
  "fill-rule": "evenodd"
}, [
  /* @__PURE__ */ d("polygon", {
    fill: "#293040",
    "fill-rule": "nonzero",
    transform: "translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",
    points: "11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
  })
], -1), O = [
  L
];
function S(o, e) {
  return w(), I("svg", U, O);
}
const h = /* @__PURE__ */ C(R, [["render", S]]);
function j(o, e) {
  let t;
  const n = () => {
    t && (clearTimeout(t), t = null), t = setTimeout(() => {
      o(), n();
    }, e);
  }, l = () => {
    t && (clearTimeout(t), t = null);
  };
  return X(() => {
    l();
  }), {
    startPlay: n,
    stopPlay: l
  };
}
const x = /* @__PURE__ */ y({
  name: "XCarousel",
  components: {
    XCarouselIndicator: p,
    Left: _,
    Right: h
  },
  props: {
    autoplay: {
      type: Boolean,
      default: !0
    }
  },
  setup(o, e) {
    var v;
    const {
      autoplay: t
    } = P(o), {
      pageIndex: n,
      prePage: l,
      nextPage: r,
      setPageIndex: u
    } = k(1), a = (v = A()) == null ? void 0 : v.default().length, i = () => {
      n.value === 1 ? u(a) : l();
    }, m = () => {
      n.value === a ? u(1) : r();
    }, {
      startPlay: V,
      stopPlay: $
    } = j(m, 3e3), g = (c) => {
      c ? V() : $();
    };
    return g(t.value), f(t, (c) => {
      g(c);
    }), () => s("div", {
      class: "x-carousel"
    }, [s("div", {
      class: "x-carousel-item-container",
      style: {
        width: a * 100 + "%",
        transform: `translateX(-${(n.value - 1) * 100 / a}%)`
      }
    }, [e.slots.default && e.slots.default()]), s("div", {
      class: "x-carousel-pagination"
    }, [s("span", {
      class: "arrow arrow-left",
      onClick: i
    }, [e.slots.left ? e.slots.left() : s(_, null, null)]), s("span", {
      class: "arrow arrow-right",
      onClick: m
    }, [e.slots.right ? e.slots.right() : s(h, null, null)])]), e.slots.indicator ? e.slots.indicator({
      count: a,
      pageIndex: n.value,
      setPageIndex: u
    }) : s(p, {
      count: a,
      modelValue: n.value,
      "onUpdate:modelValue": (c) => n.value = c
    }, null)]);
  }
}), D = {
  install(o) {
    o.component(x.name, x), o.component(p.name, p);
  }
};
export {
  x as XCarousel,
  p as XCarouselIndicator,
  D as default
};