import { Swipe, SwipeItem } from "@ls-design/ui-react";

<Swipe>
  <SwipeItem>
    <div>1</div>
  </SwipeItem>
  <SwipeItem>
    <div>2</div>
  </SwipeItem>
  <SwipeItem>
    <div>3</div>
  </SwipeItem>
  <SwipeItem>
    <div>4</div>
  </SwipeItem>
</Swipe>

<Swipe type="round">
  <SwipeItem>
    <div>1</div>
  </SwipeItem>
  <SwipeItem>
    <div>2</div>
  </SwipeItem>
  <SwipeItem>
    <div>3</div>
  </SwipeItem>
  <SwipeItem>
    <div>4</div>
  </SwipeItem>
</Swipe>

<Swipe autoplay>
  <SwipeItem>
    <div>1</div>
  </SwipeItem>
  <SwipeItem>
    <div>2</div>
  </SwipeItem>
  <SwipeItem>
    <div>3</div>
  </SwipeItem>
  <SwipeItem>
    <div>4</div>
  </SwipeItem>
</Swipe>

<Swipe defaultindex="2">
  <SwipeItem>
    <div>1</div>
  </SwipeItem>
  <SwipeItem>
    <div>2</div>
  </SwipeItem>
  <SwipeItem>
    <div>3</div>
  </SwipeItem>
  <SwipeItem>
    <div>4</div>
  </SwipeItem>
</Swipe>

<Swipe class="custom-style">
  <SwipeItem>
    <div>1</div>
  </SwipeItem>
  <SwipeItem>
    <div>2</div>
  </SwipeItem>
  <SwipeItem>
    <div>3</div>
  </SwipeItem>
  <SwipeItem>
    <div>4</div>
  </SwipeItem>
</Swipe>

<Swipe activecolor="red">
  <SwipeItem>
    <div>1</div>
  </SwipeItem>
  <SwipeItem>
    <div>2</div>
  </SwipeItem>
  <SwipeItem>
    <div>3</div>
  </SwipeItem>
  <SwipeItem>
    <div>4</div>
  </SwipeItem>
</Swipe>

export default () => {
  const handleChange = (e) => {
    const indicator = document.getElementById('indicator');
    indicator.innerHTML = `${e.detail.index + 1} / 4`;
  };
  return (
    <div >
      <Swipe onChange={handleChange}>
        <SwipeItem>
          <div  >1</div>
        </SwipeItem>
        <SwipeItem>
          <div  >2</div>
        </SwipeItem>
        <SwipeItem>
          <div  >3</div>
        </SwipeItem>
        <SwipeItem>
          <div  >4</div>
        </SwipeItem>
        <div id="indicator" slot="indicators" className="custom-indicator">
          1 / 4
        </div>
      </Swipe>
    </div>
  );
}

<style>
.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    color: #fff;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2;
}
</style>

export default () => {
  const handleChange = (e) => {
    console.log(e.detail.index, 11111);
  };
  return (
    <div>
      <Swipe onChange={handleChange}>
        <SwipeItem>
          <div>1</div>
        </SwipeItem>
        <SwipeItem>
          <div>2</div>
        </SwipeItem>
        <SwipeItem>
          <div>3</div>
        </SwipeItem>
        <SwipeItem>
          <div>4</div>
        </SwipeItem>
      </Swipe>
    </div>
  );
};