1.0.10

• SvelteKit 4.0.0 support
• Improved TS declarations
• Updated dependencies

Full Changelog: 1.0.9...1.0.10

v1.0.9

• fix: prevent counter-scrolling in some edge cases by @elixirevo in #55

v1.0.8

• (fix) Repackaged previous version using stable SvelteKit

v1.0.1

This is first stable release. Changelog:

• Smoother scrolling
• Reduced package size
• Improved performance
• Fixed iPhone compatibility bug
• Simplified usage from developer stand point
• Dropped support for programmatic scrolling (may return within next few versions)

svelte-fullpage

Added minor features, improved existing code, migrated project to svelteKit.

svelte-fullpage

Svelte-fullpage

Pure Svelte fullpage component

This component is actively maintained

5.5kB gZipped, unzipped 14.9kB

Lightweight fullpage Svelte component, no vanilla JS or FullPage.js, just pure Svelte component. There is also support for
mobile devices. Tested on Svelte and Sapper. Note that this component is in development, expect bugs, if you notice some,
please report them to this component's GitHub repo to the 'Issues' section.

Instalation

npm i svelte-fullpage --save-dev

How to use

Static version

1. Make Svelte page
2. Include import { Fullpage, FullpageSection, FullpageSlide } from 'svelte-fullpage'; into mentioned file.
3. Make fullpage sections and put them into <Fullpage>, if you need slides, make them too and put them into some <FullpageSection>.
4. Define new arrays that will contain all names of all sections and slides, insert them into Fullpage or FullpageSection
   component, example <Fullpage sections={myFullpageSectionsNames} or <FullpageSlide slides={myFullpageSlidesNames}.
5. You can check if everything is working, if you use Sapper, don't forget to make this component SSR, just include
   it like this import Fullpage from 'svelte-fullpage/src/Fullpage.svelte' and section as well
   import FullpageSection from 'svelte-fullpage/src/FullpageSection.svelte' also slides
   import FullpageSlide from 'svelte-fullpage/src/FullpageSlide.svelte'.

NOTE - Fullpage component is positioned absolute, it is recommended to put it into element with position relative.

Something copyable

<script>
    //Svelte import
    import { 
        Fullpage,
        FullpageSection,
        FullpageSlide
    } from 'svelte-fullpage';
    //Sapper import
	import Fullpage from 'svelte-fullpage/src/Fullpage.svelte';
	import FullpageSection from 'svelte-fullpage/src/FullpageSection.svelte'
	import FullpageSlide from 'svelte-fullpage/src/FullpageSlide.svelte';

    //Optional, include all titles of your sections, this is also used as number that indicate count of sections
    const sections = [
        'Home',
        'History',
        'Present',
        'Future'
    ];
    
    //Same mechanics as in sections
    const slides = [
        '1982-1993',
        '1993-2006',
        '2006-present'
    ];
</script>

<Fullpage {sections} arrows>
    <FullpageSection center>
        ...Your markup here
    </FullpageSection>
    <FullpageSection {slides} arrows>
        <FullpageSlide>
            ...Your markup here
        </FullpageSlide>
        <FullpageSlide>
            ...Your markup here
        </FullpageSlide>
        <FullpageSlide>
            ...Your markup here
        </FullpageSlide>
    </FullpageSection>
    <FullpageSection>
        ...Your markup here
    </FullpageSection>
    <FullpageSection>
        ...Your markup here
    </FullpageSection>
</Fullpage>

If you are not sure how to use this component, take a look at demo site code

Tweaks

So, there are options for customizing your fullpage component.

Fullpage

These props are customizable:

• class - string - Standard HTML class
• style - string - Standard HTML style
• sections - array - Array containing FullpageSection components/names
• activeSection - number - Number that points set visibility of sections.
• transitionDuration - number - Duration of transition between sections
• arrows - boolean - Adds support for scrolling using arrows
• drag - boolean - Allows scrolling using mouse drag
• pullDownToRefresh - boolean - Enables pull down to refresh effect on chrome mobile, default false.

FullpageSection

These props are customizable:

• class - string - Standard HTML class
• style - string - Standard HTML style
• slides - array - Array containing FullpageSlide components/names, if there are some
• activeSlide - string - Number that tells slide if is visible
• center - boolean - Centering content using flexbox
• arrows - boolean - Adds support for sliding using arrows
• select - boolean - Enables highlighting
• transitionDuration - number - Duration of transition between slides, if you want to edit it, edit it here rather than in
  transition prop, because this alters cooldown between transitions.
• transition - object - Options for transitionOut between this sections
• dragThreshold - number - Number in pixels, that says, when to switch to another section, if is drag detected on page
• touchThreshold - number - Number in pixels, that says, when to switch to another section, if is touch detected on page

FullpageSlide

These props are customizable:

• class - string - Standard HTML class
• style - string - Standard HTML style
• center - number - Centering content using flexbox
• transitionIn - object - Options for transitionIn between this slides
• transitionOut - object - Options for transitionOut between this slides

License

It's free

This component is under MIT license.