<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
        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)
        組件
        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
        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

        freeMode

        默認為false,普通模式:slide滑動時只滑動一格,并自動貼合wrapper,設置為true則變為free模式,slide會根據慣性滑動可能不止一格且不會貼合。

        freeMode信息

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

        效果演示

        slider1
        slider2
        slider3
        false


        slider1
        slider2
        slider3
        true

        使用方法示例

        <script> 
        var mySwiper = new Swiper('.swiper-container',{
        freeMode : true,
        })
        </script>
        [糾正]
        給力
        (1014)
        不給力
        (162)

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



        網友求助

          一级国外a片