Newtonian Physics Mockumentary

    svelte-carousel

    1.0.20 • Public • Published

    svelte-carousel

    svelte-carousel

    npm npm
    GitHub repo GitHub followers

    The awesome carousel component for Svelte 3

    Demo

    Installation

    yarn add svelte-carousel
    npm install svelte-carousel

    Import component

    <script>
      import Carousel from 'svelte-carousel'
      // ...
    </script>

    SvelteKit support

    There are several things to keep in mind when svelte-carousel is used with SvelteKit. This is because svelte-carousel is a client-side library and depends on document and window. See more in SvelteKit FAQ.

    1. Install svelte-carousel as a dev dependency. Why as a dev dependency?
    yarn add svelte-carousel -D
    npm install svelte-carousel -D
    1. Extend kit in svelte.config.js to include the vite property
    const config = {
      // existing props
      kit: {
        // existing props
        vite: {
          optimizeDeps: {
            include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
          }
          // plugins: []
        }
      }
    }
    1. Import and use it:
    <script>
      import Carousel from 'svelte-carousel';
      import { browser } from '$app/env';
    
      let carousel; // for calling methods of the carousel instance
      
      const handleNextClick = () => {
        carousel.goToNext()
      }
    </script>
    
    {#if browser}
      <Carousel
        bind:this={carousel}
      >
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Carousel>
    {/if}
    
    <button on:click={handleNextClick}>Next</button>

    Vite support

    1. Extend optimizeDeps.include in vite.config.js
    export default defineConfig({
      optimizeDeps: {
        include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
      }
    })
    1. Import and use it:
    <script>
      import Carousel from 'svelte-carousel'
    
      let carousel; // for calling methods of the carousel instance
      const handleNextClick = () => {
        carousel.goToNext()
      }
    </script>
    
    <Carousel
      bind:this={carousel}
    >
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </Carousel>
    
    <button on:click={handleNextClick}>Next</button>

    Props

    Prop Type Default Description
    arrows boolean true Enables next/prev arrows
    infinite boolean true Infinite looping
    initialPageIndex number 0 Page to start on
    duration number 500 Transition duration (ms)
    autoplay boolean false Enables autoplay of pages
    autoplayDuration number 3000 Autoplay change interval (ms)
    autoplayDirection string 'next' Autoplay change direction (next or prev)
    pauseOnFocus boolean false Pauses autoplay on focus (for touchable devices - tap the carousel to toggle the autoplay, for non-touchable devices - hover over the carousel to pause the autoplay)
    autoplayProgressVisible boolean false Shows autoplay duration progress indicator
    dots boolean true Current page indicator dots
    timingFunction string 'ease-in-out' CSS animation timing function
    swiping boolean true Enables swiping
    particlesToShow number 1 Number of elements to show
    particlesToScroll number 1 Number of elements to scroll

    Events

    pageChange

    It is dispatched on page change

    Payload field Type Description
    event.detail number Current page index
    <Carousel
      on:pageChange={
        event => console.log(`Current page index: ${event.detail}`)
      }
    >
      <!-- -->
    </Carousel>

    Slots

    prev and next

    They are used for customizing prev and next buttons.

    Slot props:

    Prop Type Description
    showPrevPage function Call it to switch to the previos page
    showNextPage function Call it to switch to the next page
    <Carousel
      let:showPrevPage
      let:showNextPage
    >
      <div slot="prev">
        <!-- -->
      </div>
      <div slot="next">
        <!-- -->
      </div>
      <!-- -->
    </Carousel>

    dots

    This slot is used for customizing how dots look like.

    Slot props:

    Prop Type Description
    currentPageIndex number Represents current page index (start from 0)
    pagesCount number Total pages amount
    showPage function Takes index as page to be shown
    <Carousel
      let:currentPageIndex
      let:pagesCount
      let:showPage
    >
      <div slot="dots">
        <!-- -->
      </div>
      <!-- -->
    </Carousel>

    Default slot

    This slot takes content for the carousel.

    Slot props:

    Prop Type Description
    loaded number[] Contains indexes of pages to be loaded. Can be used for lazy loading
    currentPageIndex number Represents current page index (start from 0)
    <Carousel
      let:loaded
    >
      <div>
        <!-- -->
      </div>
      <!-- -->
    </Carousel>

    Methods

    goTo

    Navigates to a page by index. (pageIndex, options) => Promise<void>.

    Arguments:

    Argument Type Default Description
    pageIndex number Page number
    options.animated boolean true Should it be animated or not
    <script>
      // ...
      let carousel;
      function goToStartPage() {
        carousel.goTo(0, { animated: false })
      }
    </script>
    
    <Carousel
      bind:this={carousel}
    >
      <!--  -->
    </Carousel>
    <button class="button" on:click={goToStartPage}>Go</button>

    goToPrev

    Navigates to the previous page. (options) => Promise<void>.

    Arguments:

    Argument Type Default Description
    options.animated boolean true Should it be animated or not
    <script>
      // ...
      let carousel;
      function goToPrevPage() {
        carousel.goToPrev({ animated: false })
      }
    </script>
    
    <Carousel
      bind:this={carousel}
    >
      <!--  -->
    </Carousel>
    <button class="button" on:click={goToPrevPage}>Go</button>

    goToNext

    Navigates to the next page. (options) => Promise<void>.

    Arguments:

    Argument Type Default Description
    options.animated boolean true Should it be animated or not
    <script>
      // ...
      let carousel;
      function goToNextPage() {
        carousel.goToNext({ animated: false })
      }
    </script>
    
    <Carousel
      bind:this={carousel}
    >
      <!--  -->
    </Carousel>
    <button class="button" on:click={goToNextPage}>Go</button>

    Install

    npm i svelte-carousel

    DownloadsWeekly Downloads

    3,855

    Version

    1.0.20

    License

    Apache-2.0

    Unpacked Size

    66.3 kB

    Total Files

    32

    Last publish

    Collaborators

    • vadimkorr