# @loickit-v/swiper

## Components

### LSlide

the Slide Component

#### Props

- name

  identification of this slide, get by `defineSlide`

- list \<Array>

  just avaliable `infinite` mode, the long list of render, will cached by `slotScope.cacheList`

- loadMore \<Function>

  just avaliable `infinite` mode, when the pointer points to the cacheList end, will trigger.

#### Hooks

**defineSlide**

define a slide object

argument:

- provideKey \<string>

  the identification of target slide

return \[createSlide, useSlide]

- createSlide

  create a slide states, use return value to registe a slide

  params:

  - initial \<SlideState>

    - direction \<SLIDE\*DIRECTION> _optional_

      default: SLIDE_DIRECTION.HORIZONTAL

      direction

    - currentIndex \<number> _optional_

      pointer

    - duration \<number> _optional_

      slide switch animation duration

    - infinite \<boolean> `infinite` _optional_

      mode enable

  return:

  - name

    the identification of target slide

  - state \<SlideState>

    the slide state

- useSlide

  return: \<SlideSate>

  use it to get slide state in any child component

#### Slot

**default**

- cacheList

  the cache data of list, just cache 3, just avaliable `infinite` mode

### LSlideItem

#### Props

- index \<number> optional

  the index of this slide item, required when `infinite` mode

### Usage

```vue
<script setup lang="ts">
import {
  defineSlide,
  LSlide,
  LSlideItem,
  SLIDE_DIRECTION
} from '@loickit-v/swiper';

defineOptions({ name: 'App' });

const [createSlide] = defineSlide('one');

const oneSlide = createSlide({
  currentIndex: 1
});

const [createSlide2] = defineSlide('two');

const twoSlide = createSlide2({
  direction: SLIDE_DIRECTION.VERTICAL
});

const oneToTwo = () => {
  oneSlide.state.currentIndex = 2;
};
</script>

<template>
  <LSlide :name="oneSlide.name">
    <LSlideItem style="background-color: red; width: 30%">1</LSlideItem>
    <LSlideItem style="background-color: blue">2</LSlideItem>
    <LSlideItem style="background-color: green">
      <LSlide :name="twoSlide.name">
        <LSlideItem style="background-color: pink; height: 30%">1</LSlideItem>
        <LSlideItem style="background-color: orange">2</LSlideItem>
        <LSlideItem style="background-color: yellow">3</LSlideItem>
      </LSlide>
    </LSlideItem>
  </LSlide>

  <p>one currentIndex: {{ oneSlide.state.currentIndex }}</p>
  <p>two currentIndex: {{ twoSlide.state.currentIndex }}</p>

  <button @click="oneToTwo">click to two slide</button>
</template>

<style lang="scss">
body,
#app {
  background-color: #ccc;
  height: 800px;
  width: 800px;
}
</style>
```