papacarousel
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    About

    Simple Carousel library written in vanilla JS, without any other dependencies! Just remember to use required functions from API.
    Recomended by alt text

    Working Demo

    Link to working demo ( will add it soon ) - Demo.
    The use example is below.

    Usage

    Install package by npm

      npm install --save-dev papacarousel

    Bundler

    import { PapaFascade } from 'papacarousel';
     
    // use with default options
    new PapaFascade().getPapa();
     
    // override default options
    new PapaFascade()
        .setParent('.papa-container')
        .setElements('.papa-item')
        .setButtons(true)
        .setProgressBar(true)
        .setTimePerSlide(5000)
        .setTimingFn(300)
        .setTransitionFn('linear')
        .setType('slidingX')
        .getPapa()

    No Bundler

        <html>
            <head></head>
            <body>
                <div class="papa-container">
                  <div class="papa-item">1</div>
                  <div class="papa-item">2</div>
                  <div class="papa-item">3</div>
                </div>
            </body>
            <script src="node_modules/papacarousel/bundles/papacarousel.min.umd.js"></script> 
            <script>
                // use with default options
                new Papacarousel.PapaFascade().getPapa();
                
                // override default options
                new Papacarousel.PapaFascade()
                    .setParent('.papa-container')
                    .setElements('.papa-item')
                    .setButtons(true)
                    .setProgressBar(true)
                    .setTimePerSlide(5000)
                    .setTimingFn(300)
                    .setTransitionFn('linear')
                    .setType('slidingX')
                    .getPapa();
            </script> 
        </html>

    Styles

    There are certain styles that are required. Check this file: Required Styles.

    API

    PapaCarousel has several options. To change any option, use the function presented below.

    Options

    • getPapa()
      Action: Initialize and start carousel
      Required: true - important
      Example: getPapa();
      Note: Use this function as last one

    • setParent()
      Action: Setting new element as parent of Carousel
      Default value: .papa-container
      Argument type: string or HTMLElement
      Required: false
      Example: setParent('.my-class')

    • setElements()
      Action: Setting new elemenets as Carousel's items
      Default value: .papa-item
      Argument type: string or HTMLElement
      Required: false
      Example: setElements('.my-class')

    • setButtons()
      Action: Show navigation of Carousel
      Default value: false
      Argument options: true / false
      Required: false
      Example: setButtons(true)

    • setProgressBar()
      Action: Show progress bar
      Default value: false
      Argument options: true / false
      Required: false
      Example: setProgressBar(true)

    • setTimePerSlide()
      Action: Changes the time of switching the slides
      Default value: 5000
      Argument options: number in milliseconds
      Required: false
      Example: setTimePerSlide(2000)

    • setTimingFn()
      Action: Changes the duration of the animation
      Default value: 250
      Argument options: number in milliseconds
      Required: false
      Example: setTimingFn(150)

    • setTransitionFn()
      Action: Changes the animation function
      Default value: ease-in
      Argument options: ease, linear, ease-in, ease-out, ease-in-out
      Required: false
      Example: setTransitionFn('ease-in-out')

    • setType()
      Action: Changes the animation function
      Default value: fading
      Argument options: fading, slidingX, slidingY, more will come.. :)
      Required: false
      Example: setType('slidingX')

    Remove Listeners

    The library uses the listeners on elements that require it. If you want to stop carousels - use the function below.

    Bundler
    import { PapaFascade } from 'papacarousel';
     
    new PapaFascade().destroyListeners();
    No Bundler
    <script src="node_modules/papacarousel/bundles/papacarousel.min.umd.js"></script>
    <script>
      new Papacarousel.PapaFascade().destroyListeners();
    </script> 

    License

    MIT License

    Install

    npm i papacarousel

    DownloadsWeekly Downloads

    1

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    603 kB

    Total Files

    97

    Last publish

    Collaborators

    • zgrybus