docs: demonstration of programmatic controller and slide indicator in…

… demo page

src/routes/+page.svelte

@@ -1,18 +1,34 @@
-<script>
+<script lang="ts">
     import '../css/bootstrap.css'
     import {
+        type FullpageActivityStore,
         Fullpage,
         FullpageSection,
         FullpageSlide
     } from '$lib'
+    import { onMount } from 'svelte'
+
+    let fullpageController: FullpageActivityStore
+    let sectionController: FullpageActivityStore
+
+    onMount(() => {
+        window.fullpageController = fullpageController
+        window.sectionController = sectionController
+        console.info('Hey, you can access fullpage controller from console, try typing window.fullpageController or' +
+            ' simply fullpageController, same for sectionController, try calling on them .goto(index) for programmatic navigation.')
+        console.log('example: fullpageController.goto(2) will scroll to third section')
+    })
+
+    $: console.log(`Active section: ${$fullpageController}, active slide: ${$sectionController}`)
 </script>
 
 <svelte:head>
     <title>Svelte-fullpage</title>
 </svelte:head>
 
-<Fullpage>
+<Fullpage bind:controller={fullpageController}>
     <FullpageSection title="Svelte Fullpage">
+
         <div class="container text-center">
             <div class="row">
                 <div class="col">
@@ -23,11 +39,14 @@
                         This page is made using svelte-fullpage component, try to scroll, drag with mouse or swipe
                         vertical with finger or use arrows to scroll.
                     </p>
+                    <p>
+                        Try opening console and see what is being logged when you scroll <kbd>ctr + shift + I</kbd>
+                    </p>
                 </div>
             </div>
         </div>
     </FullpageSection>
-    <FullpageSection title="Features" class="bg-info">
+    <FullpageSection title="Features" class="bg-info" bind:controller={sectionController}>
         <FullpageSlide title="slides">
             <div class="container text-center">
                 <div class="row">
@@ -37,6 +56,9 @@
                             There is also component for slides as you can see.
                             Try to drag/swipe right or left, also you can use arrows.
                         </p>
+                        <p>
+                            This is section {$fullpageController} and slide {$sectionController}
+                        </p>
                     </div>
                 </div>
             </div>
@@ -45,9 +67,10 @@
             <div class="container text-center">
                 <div class="row">
                     <div class="col">
-                        <h1>Another slide</h1>
+                        <h1>Usage example</h1>
                         <p>
-                            You can style every individual slide, notice background change.
+                            Look at <a href="https://github.com/Hejtmus/svelte-fullpage/blob/master/src/routes/%2Bpage.sveltea">source code</a>
+                            of this very page to see how to use this component, and thus inspire yourself.
                         </p>
                     </div>
                 </div>
@@ -94,14 +117,21 @@
                         is problem with slide animation. Currently I'm the only contributor of this project, feel free
                         to fork it and make pull request.
                     </p>
+                    <p>
+                        This is section {$fullpageController}
+                    </p>
                 </div>
             </div>
         </div>
     </FullpageSection>
 </Fullpage>
 
-<style>
+<style global>
     :global(body) {
         height: 100vh;
     }
+    ul.svelte-fp-slide-indicator>li>button>i {
+        background-color: #fff;
+        border: 1px solid #000;
+    }
 </style>