<code id="ueja0"><nobr id="ueja0"><sub id="ueja0"></sub></nobr></code>

  • <del id="ueja0"><small id="ueja0"></small></del>

      1. 配置選項

        Swiper5/Swiper4的配置選項

        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:
        autoHeight:false
        uniqueNavElements:true
        nested:false
        runCallbacksOnInit:true
        watchOverflow:false
        on:
        init:true
        preloadImages:true
        updateOnImagesReady:true
        cssMode:false
        Slides grid (網格分布)
        centeredSlides:false
        centeredSlidesBounds: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:Swiper5默認false/Swiper4默認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)
        mySwiper.translateTo(translate, speed, ...)
        組件
        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-fill
        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
        renderSlide:null
        renderExternal: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

        reachEnd()

        回調函數,當Swiper切換到最后一個Slide時執行。

        reachEnd()信息

        啟用版本:
        4.0.0

        效果演示

        slider1
        slider2
        slider3

        使用方法示例

        <script language="javascript"> 
        var mySwiper = new Swiper('.swiper-container',{
          on:{
            reachEnd: function(){
              alert('到了最后一個slide');
            },
          },
        })
        </script>
        [糾正]
        給力
        (47)
        不給力
        (23)

        轉載原創文章請注明:文章轉載自:Swiper中文網 [http://www.spc56.com]
        本文地址:http://www.spc56.com/api/event/230.html



        網友求助

          一级国外a片