Example

README.md

@@ -1,14 +1,66 @@
 # Js Carousel:
+
 A pure Js customisable carousel, that snaps! uses CSS scroll snap on mobile.
 
+## Usage:
+
+Here's a simple usage of the Carousel. Note: parent element should be wrapped by
+a wrapper element.
+
+HTML:
+
+```
+<div class="wrapper">
+      <ul class="carousel-parent">
+      <li class="carousel-item"> carousel element</li>
+      <li class="carousel-item"> carousel element</li>
+      </ul>
+</div>
+```
+
+JS:
+
+```
+Carousel({
+  parent: ".carousel-parent",
+  child: ".carousel-item",
+});
+```
+
+CSS:
+
+```
+.wrapper{
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  width: 100%;
+}
+
+.carousel-parent{
+  display: flex;
+  align-items: center;
+}
+
+.carousel-item{
+  width: 150px;
+  height: auto;
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+  position: relative
+}
+```
+
 ## Features:
+
 - Supports snapping of carousel.
 - Supports autoplay with a specified interval.
 - Supports scrolling and dragging.
 - Direction is alterable.
 - Alignment is alterable.
 
 ## Dependencies:
+
 - Use Gesture: https://use-gesture.netlify.app/docs/#vanilla-javascript
 - Anime js: https://animejs.com/
 
@@ -80,7 +132,9 @@ the carousel to snap at the center of each child of the carousel.
 
 > Type: string
 
-> Options: 'start'||'center'||'end' Default: 'start'
+> Options: 'start'||'center'||'end'
+
+> Default: 'start'
 
 ### direction:
 

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "browser-js-library-template",
+  "name": "js-carousel",
   "version": "1.0.0",
   "type": "module",
-  "description": "Template for production ready vanilla js library",
+  "description": "A pure Js customisable carousel, that snaps! uses CSS scroll snap on mobile.",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/timelessco/browser-js-library-template.git"
+    "url": "git+https://github.com/timelessco/js-carousel"
   },
-  "homepage": "https://github.com/timelessco/browser-js-library-template#readme",
+  "homepage": "https://github.com/timelessco/js-carousel#readme",
   "bugs": {
-    "url": "https://github.com/timelessco/browser-js-library-template/issues"
+    "url": "https://github.com/timelessco/js-carousel/issues"
   },
   "author": "Timeless <[email protected]> (https://timeless.co/)",
   "license": "MIT",
@@ -33,7 +33,11 @@
     "library",
     "production",
     "template",
-    "vanilla"
+    "vanilla",
+    "carousel",
+    "slider",
+    "js-slider",
+    "js-carousel"
   ],
   "scripts": {
     "build": "vite build --config vite-lib.config.js",