swipe-core

• 6k before gzip

Demo

• https://jiubao.github.io/swipe-core/
• https://jiubao.github.io/swipe-core/3d/

Features

Designed for mobile: compact, smooth and efficient

• animation: css animation has limitations, use js to simulate animation
  • use requestAnimationFrame and have a compact polyfill
  • use cubic bezier to simulate ease out
• always move one element which contain current 3 slides
• a compact link implementation to loop slides
• stop auto swipe when out of screen
  • android: IntersectionObserver
  • ios: throttle(requestAnimationFrame)
• listen visibilitychange to stop auto swipe when page invisible

Install

$ npm install --save swipe-core

$ yarn add swipe-core

// using ES6 modules
import swiper from 'swipe-core/dist/swipe-core.es'

The UMD build is available on unpkg:

<script src="https://unpkg.com/swipe-core"></script>

Usage

basic: auto cycle

<div id="auto">
  <div>
    <div><img src="./imgs/1.jpg" /> </div>
    <div><img src="./imgs/2.jpg" /> </div>
    <div><img src="./imgs/3.jpg" /> </div>
    <div><img src="./imgs/4.jpg" /> </div>
    <div><img src="./imgs/5.jpg" /> </div>
  </div>
</div>

import swiper from 'swipe-core/dist/swipe-core.es'
var auto = document.getElementById('auto')
swiper({
  root: auto,
  elms: Array.prototype.slice.apply(auto.children[0].children),
  auto: true,
  onEnd: index => console.log(index)
})

expose: expose css cycle two slides

<div id="expose" class="swipe-core-wh">
  <div>
    <div class="swipe-core-wh">
      <div class="box"> <img src="./imgs/1.jpg" /> </div>
    </div>
    <div class="swipe-core-wh">
      <div class="box"> <img src="./imgs/2.jpg" /> </div>
    </div>
  </div>
</div>

import swiper from 'swipe-core/dist/swipe-core.es'
var expose = document.getElementById('expose')
swiper({
  root: expose,
  elms: Array.prototype.slice.apply(expose.children[0].children),
  expose: true,
  css: true
})

#expose { margin-left: 30px; }
.box { padding: 0 5px; }
.swipe-core-wh { width: 315px; height: 200px; }

Options

Attribute	Description	Type	Default	Values
auto	auto swipe	Boolean	false	true false
cycle	cycle swipe	Boolean	true	true false
expose	expose mode	Boolean	false	true false
root	root element	Dom element
elms	slides elements	Array	[]
index	initial slide index	Number	0
width	slide width	Number	window.screen.width
height	slide height	Number	200
css	use css to control w/h	Boolean	false	true false
ease	easing	String	cubic	circ cubic
plugins	plugins	Array	[]

Methods

Name	Description	Parameters	Return
destroy	destroy swipe
index	get current index		current index
on	add a event handler	event name, event handler	unregister function

Events

Name	Description	trigger	Parameters
init	initial	-	index, current, main, elms
start	start move	-	index, current, main, elms
move	slides moving	-	index, current, main, elms
end	after animation	-	index, current, main, elms
animationEnd	after animation	-	index, current, main, elms

Event handler arguments

Name	Description
index	current index
current	current slide
main	main dom element
elms	all elements' array

element interface

Name	Description
$index	current index
$prev	previous element
$next	next element

examples:

// bind 'move'
var off = swiperInstance.on('move', (index, current, main, elms) => {
  // next slide
  console.log(current.$next)
})
// unbind 'move'
off()

Todos

• performance
• link list
• vertical scroll on page
• group current 3 slides
• use js to simulate animation
• ease animating
• fast drag
• fast touch
• swipe left & right
• disable cycle
• expose mode
• support one / two slides
• dynamic interval
• auto swipe
• polyfill requestAnimationFrame
• polyfill cloneNode deep
• vendor prefix for transition/transform/translate3d
• current index interface
• css width height
• stop auto swipe when out of screen (android & ios)
• onEnd
• onStart | onMove | onEnd
• dynamic slides
• init animation
• desktop
• inject version info into dist files