suporka-carousal

suporka-carousal is a carousal plugin for web.

You can use it to make a carousal easier than by yourself writtinng.

Usage

// install the plugin
npm install suporka-carousal

Demo

<div id="carousal">
  <!-- left buttton -->
  <button
    type="button"
    class="suporka-carousel__arrow suporka-carousel__arrow--left"
    style=""
    id="suporka-prev-btn"
  >
    &lt;
  </button>
  <div id="wrapper">
    <div class="box">
      <img
        src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher1.jpg"
        alt=""
      />
    </div>
    <div class="box">
      <img
        src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher2.jpg"
        alt=""
      />
    </div>
    <div class="box">
      <img
        src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher3.jpg"
        alt=""
      />
    </div>
    <div class="box">
      <img
        src="http://h5.sztoda.cn/static/img/loveLetter/teacher/teacher4.jpg"
        alt=""
      />
    </div>
  </div>
  <!-- right button -->
  <button
    type="button"
    class="suporka-carousel__arrow suporka-carousel__arrow--right"
    style=""
    id="suporka-next-btn"
  >
    &gt;
  </button>
</div>

// import carousal in js
import Carousal from 'suporka-carousal'
new Carousal(option)

// or use it by script tag
<script src="https://cdn.jsdelivr.net/npm/[email protected]/carousal.js"></script>
<script>
  new Carousal(option)
</script>

option

type: Object

| attr | default | description | | :--------: | :-----: | :-----------------------------: | | time | 4000 | the slider time(ms) of carousal | | transition | 0.8 | transition time(s) | | autoScroll | true | if auto scroll | | showDot | false | if show the bottom dot |

Questions

If you have some questionn, you can send me a E-mail([email protected]).