presentation-js

A simplistic carousel package with out the need of JQuery

Usage no npm install needed!

<script type="module">
  import presentationJs from 'https://cdn.skypack.dev/presentation-js';
</script>

README

Presentation-js

Carousel without the use of JQuery

==================================================================

Installation

  1. Clone the repo
  2. run npm install to install dependecies

requirements

please provide the style and script tag to your application

    <link rel="stylesheet" href="build/styles/main.css">
    <script src="build/bundle.js"></script>

Usage

To be able to run Presentation-js you will need to provide a container with an attribute of presentation-js The container can only have children of divs with a background-image/text provided and height The divs will take the entire width of it's containers You will need to provide a data-slide attribute the the children of the container. example can be found on the index.html page to initialize the container. You will need to provide presentation.start() function

presentation.start()

Configuration

This function takes in one optional parameter. The parameter is the object to which you can provide presentation-js with configurations to the carousel.

presentation.start('presentation', {
  timer: 6000,
  arrows: true,
  autoSlide: true,
  dots: false,
  dotsSize: '13px',
  activeDotColor: 'white',
  inactiveDotColor: 'gray',
  arrowSize: '25px',
  arrowColor: 'beige'
  })

these are the current default parameters that presentation-js will run off of unless changed by the user itself. Keep in mind that when changing parameter, the value types need to be the same as the defaults or else you will see a type error from presentation-js