It’s been almost a year since stable 1.0 was released.

During the rough and tumble of 2020 I completely reworked the core module of Tiny-Swiper, which now has perfect support for loop/freeMode configuration items, as well as richer apis and plugins that allow us to achieve other complex and cool effects.

For details, see 👉👉 github.com/joe223/tiny… 👈 👈

See the sample please to tiny-swiper.joe223.com/docs/demo/

Also redesigned the LOGO (looks good 🤪)

The current release is 2.0.0-alpha.4 and there may be some glitches. Looking forward to your feedback!!

introduce

SwiperJS is a rich and interactive library. However, the minimum version file is 140kb and 35kb with gzip. If we use the ES module version, we also need to adjust the build configuration or Polyfill. When not using the build tool, we had to import the whole SwiperJS. Moreover, in most cases, the rotation effect of mobile terminal can be achieved with its core functions without the introduction of additional plug-ins.

And when you have the same needs that I do,Tiny-SwiperMaybe it’s a better choice

  • The core library is only 4KB compressed
  • Compatible SwiperJS API
  • Good sliding experience
  • Plug-in support
  • Test case coverage

How to use

Complete documentation

For detailed documentation and a list of plug-ins, click here github.com/joe223/tiny… ✨ ✨

Basic usage

Take a look at an example:

import Swiper from 'tiny-swiper'

const swiper = new Swiper('#swiper')
Copy the code

That way, you can even replace SwiperJS with tiny-swiper just by changing the import statement.

The introduction of the plugin

Let’s try using the image lazy loading plugin again:

import Swiper from 'tiny-swiper'
import SwiperPluginLazyload from 'tiny-swiper/lib/modules/lazyload.min.js'

Swiper.use([ SwiperPluginLazyload ])

const mySwiper = new Swiper('#swiper', {
    lazyload: {
        loadPrevNext: false.loadPrevNextAmount: 1.loadOnTransitionStart: false.elementClass: 'swiper-lazy'.loadingClass: 'swiper-lazy-loading'.loadedClass: 'swiper-lazy-loaded'.preloaderClass: 'swiper-lazy-preloader'}})Copy the code

You can also use this for a single instance:

import Swiper from 'tiny-swiper'
import SwiperPluginLazyload from 'tiny-swiper/lib/modules/lazyload.min.js'

const mySwiper = new Swiper('#swiper', {
    Plugins: [ SwiperPluginLazyload ],
    lazyload: {
        loadPrevNext: false.loadPrevNextAmount: 1.loadOnTransitionStart: false.elementClass: 'swiper-lazy'.loadingClass: 'swiper-lazy-loading'.loadedClass: 'swiper-lazy-loaded'.preloaderClass: 'swiper-lazy-preloader'}})Copy the code

Here are some examples of the effects. For more examples, go to joe223.com/tiny-swiper.

Welcome to issue to exchange ideas. BTW, happy New Year to everyone!