https://github.com/zhangyu1818/simple-carousel

a simple carousel,without jQuery
https://github.com/zhangyu1818/simple-carousel

Last synced: 23 days ago
JSON representation

a simple carousel,without jQuery

• Host: GitHub
• URL: https://github.com/zhangyu1818/simple-carousel
• Owner: zhangyu1818
• License: mit
• Created: 2019-03-10T13:27:55.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-11-21T07:37:29.000Z (about 1 year ago)
• Last Synced: 2024-11-10T06:11:44.564Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://zhangyu1818.github.io/simple-carousel/
• Size: 73.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# simple-carousel

a simple carousel,without jQuery

**Preview**

live [demo](https://zhangyu1818.github.io/simple-carousel/)

# Installation

`npm install simple-carousel-js`

# Usage

```javascript

import Carousel from 'simple-carousel-js';

const img = ['./1.jpg', './2.jpg', './3.jpg'];

const carousel = new Carousel(img, {

    // default options

    width: '100vw', // px、rem ...

    height: '50vh',

    element: '.carousel', // use document.querySelector(selector)

    duration: 1, // animation duration

    tween: 'Quart.easeOut', 

    pagination: true, // show pagination

    arrowButton: true, // show prev and next button

    momentum: 1, // turn to next page in a smaller number

    autoplay: true,

    autoplayDelay: 5,

    preventDefault: false,

    scale: false, // it's occurs when dragging

    // custom class name，string or string array

    customStyles: {

        imgClass: '',

        paginationClass: '',

        dotClass: '',

        prevButtonClass: '',

        nextButtonClass: '',

    },

});

// destroy,remove carousel html and event

carousel.destroy()

```

See [tween](https://www.zhangxinxu.com/study/201612/how-to-use-tween-js.html)

Also,you can use `script` tag