0.1.0 • Public • Published



    npm version Build Status Dependencies Status License

    这是对 fullPage.js 的封装,实现非常酷炫的翻页效果。


    If you are using Ember CLI 0.2.3 or higher, just run within your project directory:

    ember install ember-cli-fullpagejs --save-dev

    If your Ember CLI version is greater than 0.1.5 and less than 0.2.3, run the following within your project directory:

    ember install:addon ember-cli-fullpagejs

    When your Ember CLI version is below 0.1.5, please run within your project directory:

    npm install --save-dev ember-cli-fullpagejs
    ember generate ember-cli-fullpagejs


    You only use the tag {{#full-page}}{{/full-page}} instead of <div id="fullpage"></div> in your template files, others are the same as using fullPage.js.

    (1)Required HTML structure

        <div class="section">Some section</div>
        <div class="section">Some section</div>
        <div class="section">Some section</div>
        <div class="section">Some section</div>

    In order to create a landscape slider within a section, each slide will be defined by default with an element containing the slide class:

    <div class="section">
        <div class="slide"> Slide 1 </div>
        <div class="slide"> Slide 2 </div>
        <div class="slide"> Slide 3 </div>
        <div class="slide"> Slide 4 </div>


    You can add an option in the tag, ex:

    {{#full-page autoScrolling='true' navigation='true' anchors='["firstPage", "secondPage"]' }}

    Note: The value of the option has to be wrapped by Single quotation mark ' instead of Double quotation marks ".

    All of the options are the following, you can read more:

    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 1000,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    resetSliders: false,
    fadingEffect: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: false,
    scrollOverflowOptions: null,
    touchSensitivity: 15,
    normalScrollElementTouchThreshold: 5,
    bigSectionsDestination: null,
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,
    controlArrows: true,
    verticalCentered: true,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    //Custom selectors
    sectionSelector: '.section',
    slideSelector: '.slide',
    onLeave: function(index, nextIndex, direction){},
    afterLoad: function(anchorLink, index){},
    afterRender: function(){},
    afterResize: function(){},
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}


    • git clone this repository
    • npm install
    • bower install


    Running Tests

    • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
    • ember test
    • ember test --server


    • ember build

    For more information on using ember-cli, visit http://ember-cli.com/.


    npm i ember-cli-fullpagejs

    DownloadsWeekly Downloads






    Last publish


    • imfly