配置選項

Swiper4.x的全部配置選項、方法、函數

Swiper初始化
new Swiper(swiperContainer, parameters)
Basic(Swiper一般選項)
initialSlide:0
direction:horizontal
speed:300
grabCursor:false
parallax:false
setWrapperSize:false
virtualTranslate:false
a11y:
width:
height:
roundLengths:false
breakpoints:
breakpointsInverse:false
autoHeight:false
uniqueNavElements:true
nested:false
runCallbacksOnInit:true
watchOverflow:false
on:
init:true
preloadImages:true
updateOnImagesReady:true
Slides grid (網格分布)
centeredSlides:false
slidesPerView:1
slidesPerGroup:1
spaceBetween:0
slidesPerColumn:1
slidesPerColumnFill:column
slidesOffsetBefore:0
slidesOffsetAfter:0
normalizeSlideIndex:true
centerInsufficientSlides:false
Free Mode (free模式/抵抗反彈)
freeMode:false
freeModeMomentum:true
freeModeMomentumRatio:1
freeModeMomentumVelocityRatio:1
freeModeMomentumBounce:true
freeModeMomentumBounceRatio:1
freeModeSticky:false
freeModeMinimumVelocity:0.02
Loop (環路)
loop:false
loopAdditionalSlides:0
loopedSlides:1
loopFillGroupWithBlank:false
Progress(進度)
watchSlidesProgress:false
watchSlidesVisibility:false
Clicks (點擊)
preventClicks:true
preventClicksPropagation:true
slideToClickedSlide:false
Touches(觸發條件)
touchRatio:1
simulateTouch:true
allowTouchMove:true
followFinger:true
shortSwipes:true
longSwipes:true
longSwipesMs:300
longSwipesRatio:0.5
threshold:false
touchAngle:45
touchStartPreventDefault:true
touchStartForcePreventDefault:false
touchMoveStopPropagation:true
resistance:true
resistanceRatio:0.85
iOSEdgeSwipeDetection:false
iOSEdgeSwipeThreshold:20
passiveListeners:true
touchReleaseOnEdges:false
touchEventsTarget:container
Swiping / No swiping(禁止切換)
preventInteractionOnTransition:false
noSwiping:true
noSwipingSelector:
noSwipingClass:swiper-no-swiping
allowSlideNext:true
allowSlidePrev:true
swipeHandler:null
Observer (監視器)
observer:false
observeParents:false
observeSlideChildren:false
Namespace (命名空間)
wrapperClass
slideClass
slideActiveClass
slideVisibleClass
slideDuplicateClass
slideNextClass
slidePrevClass
slideDuplicatedActiveClass
slideDuplicatedNextClass
slideDuplicatedPrevClass
containerModifierClass
Events (事件)
init
touchStart(event)
touchMove(event)
touchEnd(event)
slideChangeTransitionStart
slideChangeTransitionEnd
imagesReady
transitionStart
transitionEnd
touchMoveOpposite(event)
sliderMove(event)
click(event)
tap(event)
doubleTap(event)
progress(progress)
reachBeginning()
reachEnd()
beforeDestroy()
setTransition(transition)
resize()
setTranslate(translate)
slideNextTransitionStart
slideNextTransitionEnd
slidePrevTransitionStart
slidePrevTransitionEnd
fromEdge
slideChange
autoplayStart
autoplayStop
autoplay
Properties (Swiper屬性)
mySwiper.activeIndex
mySwiper.realIndex
mySwiper.previousIndex
mySwiper.width
mySwiper.height
mySwiper.touches
mySwiper.params
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.slides
mySwiper.translate
mySwiper.progress
mySwiper.isBeginning
mySwiper.isEnd
mySwiper.animating
mySwiper.clickedIndex
mySwiper.clickedSlide
mySwiper.allowSlideNext
mySwiper.allowSlidePrev
mySwiper.allowTouchMove
Methods (Swiper方法)
mySwiper.slideNext(speed, runCallbacks)
mySwiper.slidePrev(speed,runCallbacks)
mySwiper.slideTo(index, speed, runCallbacks)
mySwiper.slideToLoop(index, speed, runCallbacks)
mySwiper.destroy(deleteInstance, cleanupStyles)
mySwiper.getTranslate()
mySwiper.setTranslate(translate)
mySwiper.updateSize()
mySwiper.updateSlides()
mySwiper.updateProgress()
mySwiper.updateSlidesClasses()
mySwiper.update(updateTranslate)
mySwiper.detachEvents()
mySwiper.attachEvents()
mySwiper.appendSlide(slides)
mySwiper.prependSlide(slides)
mySwiper.addSlide(index, slides);
mySwiper.removeSlide(index)
mySwiper.removeAllSlides()
mySwiper.on(event,handler)
mySwiper.once(event,handler)
mySwiper.off(event)
mySwiper.off(event, handler)
mySwiper.setGrabCursor()
mySwiper.unsetGrabCursor()
mySwiper.updateAutoHeight(speed)
mySwiper.slideToClosest(speed, runCallbacks)
mySwiper.changeDirection(direction)
組件
Autoplay (自動切換)
autoplay:false
delay:3000
stopOnLastSlide:false
disableOnInteraction:true
reverseDirection:false
waitForTransition:true
mySwiper.autoplay.running:
mySwiper.autoplay.start():
mySwiper.autoplay.stop():
Effects (切換效果)
effect:slide
fadeEffect:
cubeEffect:
coverflowEffect:
flipEffect:
Pagination(分頁器)
pagination:
el:null
type:bullets
progressbarOpposite:false
bulletElement:span
dynamicBullets:false
dynamicMainBullets:1
hideOnClick:false
clickable:false
renderBullet(index, className):null
renderFraction():null
renderProgressbar():null
renderCustom():null
formatFractionCurrent:
formatFractionTotal:
bulletClass:swiper-pagination-bullet
bulletActiveClass:swiper-pagination-bullet-active
modifierClass:swiper-pagination-
currentClass:swiper-pagination-current
totalClass:swiper-pagination-total
hiddenClass:swiper-pagination-hidden
progressbarFillClass:swiper-pagination-progressbar
clickableClass:swiper-pagination-clickable
mySwiper.pagination.el:
mySwiper.pagination.bullets:
mySwiper.pagination.render():
mySwiper.pagination.update():
paginationHide:
paginationShow:
paginationRender(swiper, pagina:
paginationUpdate(swiper, pagina:
Navigation Buttons(前進后退按鈕)
navigation:
nextEl:null
prevEl:null
hideOnClick:false
disabledClass:swiper-button-disabled
hiddenClass:swiper-button-hidden
mySwiper.navigation.nextEl:
mySwiper.navigation.prevEl:
mySwiper.navigation.update():
navigationHide:
navigationShow:
Scollbar(滾動條)
scrollbar:
el:null
hide:true
draggable:false
snapOnRelease:true
dragSize:
mySwiper.scrollbar.el:
mySwiper.scrollbar.dragEl:
mySwiper.scrollbar.updateSize():
Keyboard(鍵盤)
keyboard:false
enabled:false
onlyInViewport:true
mySwiper.keyboard.enabled:
mySwiper.keyboard.enable():
mySwiper.keyboard.disable():
keyPress():
Mousewheel (鼠標)
mousewheel:false
forceToAxis:false
releaseOnEdges:false
invert:false
sensitivity:1
eventsTarged:container
mySwiper.mousewheel.enabled:
mySwiper.mousewheel.enable():
mySwiper.mousewheel.disable():
Lazy Loading(延遲加載)
lazy:false
loadPrevNext:false
loadPrevNextAmount:1
loadOnTransitionStart:false
elementClass:swiper-lazy
loadingClass:swiper-lazy-loading
loadedClass:swiper-lazy-loaded
preloaderClass:swiper-lazy-preloader
mySwiper.lazy.load():
mySwiper.lazy.loadInSlide(index:
lazyImageLoad(slideEl, imageEl):
lazyImageReady(slideEl, imageEl:
Zoom (調焦)
zoom:
maxRatio:3
minRatio:1
toggle:true
containerClass:swiper-zoom-container
mySwiper.zoom.enabled:
mySwiper.zoom.scale:
mySwiper.zoom.enable():
mySwiper.zoom.disable():
mySwiper.zoom.toggle():
mySwiper.zoom.in():
mySwiper.zoom.out():
zoomChange:
Controller (雙向控制)
controller:
control:null
inverse:false
By:slide
Thumbs (縮略圖)
thumbs:
swiper:
slideThumbActiveClass:swiper-slide-thumb-active
thumbsContainerClass:swiper-container-thumbs
mySwiper.thumbs.swiper:
Virtual Slides (虛擬slide)
virtual:
slides:[]
cache:true
renderExternal:null
renderSlide:null
addSlidesBefore:0
addSlidesAfter:0
mySwiper.virtual.cache:
mySwiper.virtual.from:
mySwiper.virtual.to:
mySwiper.virtual.slides:
mySwiper.virtual.appendSlide(sl:
mySwiper.virtual.prependSlide(s:
mySwiper.virtual.update():
mySwiper.virtual.removeSlide(sl:
mySwiper.virtual.removeAllSlide:
Hash Navigation (錨導航)
hashNavigation:false
watchState:false
replaceState:false
History Navigation (歷史導航)
history:
replaceState:false
key:slides

风暴魔域贵族交易限制:parallax

設置為true開啟視差效果。
效果可以應用于container或slide的子元素。當應用于container的子元素(常用于視差背景圖),每次切換時視差效果僅有設定值的slide個數-1分之1

1.視差位移變化
在所需要的元素上增加data-swiper-parallax屬性(與Swiper切換方向相同)或data-swiper-parallax-x (x方向) data-swiper-parallax-y(y方向)

data-swiper-parallax接受兩種類型的參數。
          number(單位:px),如-300,從右邊300px進入左邊出去。
          percentage(百分比),移動距離=該元素寬度 * percentage。

2.視差透明度變化
在所需要的元素上增加data-swiper-parallax-opacity屬性??裳≈?-1,如0.5,從半透明進入半透明出去

3.視差縮放變化
在所需要的元素上增加data-swiper-parallax-scale屬性??裳≈等?.5,從一半大小進入一半大小出去

還可通過data-swiper-parallax-duration設定視差動畫持續時間(ms)。默認值是Swiper的speed,與切換時間同步。

*設定透明度或縮放必須同時設定位移,否則無效(4.0.5) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度變化</div>

parallax信息

類型:
boolean
默認:
false
舉例:
true
啟用版本:
4.0.0

效果演示

风暴魔域野外300BOSS点 www.tmsjk.icu

使用方法示例

<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
    <div class="swiper-wrapper">
       <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-100">從右邊100px開始進入</div>
            <div class="subtitle" data-swiper-parallax="-200">從右邊200px開始進入</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>從右邊300px開始進入,時間600ms</p>
            </div>
            <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度變化</div>
            <div data-swiper-parallax-scale="0.15" >縮放變化</div>
        </div>
    </div>
</div>
<script language="javascript"> 
    var mySwiper = new Swiper('.swiper-container',{
            parallax : true,
    })
</script>
[糾正]
給力
(567)
不給力
(133)

轉載原創文章請注明:文章轉載自:Swiper中文網 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/parameters/197.html



網友求助