https://github.com/joe223/tiny-swiper

Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
https://github.com/joe223/tiny-swiper

2kb carousel javascript slider swiper swiper-js swiper-slider

Last synced: 26 days ago
JSON representation

Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.

• Host: GitHub
• URL: https://github.com/joe223/tiny-swiper
• Owner: joe223
• Created: 2019-10-14T03:36:02.000Z (about 5 years ago)
• Default Branch: dev
• Last Pushed: 2023-12-04T15:12:37.000Z (11 months ago)
• Last Synced: 2024-05-23T03:26:23.965Z (6 months ago)
• Topics: 2kb, carousel, javascript, slider, swiper, swiper-js, swiper-slider
• Language: TypeScript
• Homepage: https://tiny-swiper.js.org
• Size: 4.07 MB
• Stars: 1,281
• Watchers: 13
• Forks: 57
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md

Awesome Lists containing this project

• my-awesome-list - tiny-swiper

README

        


    

        

    





    

    

    

    

    

    

    



Tiny-Swiper




Ingenious JavaScript Carousel powered by wonderful plugins with native-like experience. 

Lightweight yet extensible. Import plugins as needed, No more, no less.

Zero dependency, written in TypeScript, used for free and without any attribution.





Looking for more details about APIs and Demos, visit tiny-swiper.js.org



## Usage

### Installation

```shell

# via npm

$ npm install tiny-swiper --save

# via yarn

$ yarn add tiny-swiper

```

If you prefer CDN

```html

```

### Initialization

Html code:

```html



    

    


        

        
Slide 1

        
Slide 2

        
Slide 3

        ...

    

    

    




```


JavaScript/TypeScript code:

```javascript

import Swiper, {

    SwiperPluginLazyload,

    SwiperPluginPagination

} from 'tiny-swiper'

Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])

const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)

```

- `new Swiper()` - initialize swiper with options.

- `Swiper.use()` - Register plugin.

- `swiperContainer` - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.

- `parameters` - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

```javascript

import Swiper from 'tiny-swiper/lib/index.full.js'

```

```html

```

## Browsers support

All modern browsers are supported, include IE10+.

| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
iOS Safari | [](http://godban.github.io/browsers-support-badges/)
Samsung | [](http://godban.github.io/browsers-support-badges/)
Opera |

| --------- | --------- | --------- | --------- | --------- | --------- | --------- |

| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions

## Contribution

Please make sure to read the [Contributing Guide](.github/CONTRIBUTING.md) before making a pull request.

Thanks goes to these wonderful people



  



## License

Tiny-Swiper is licensed under a [MIT License](./LICENSE).