@yoursurprise/slider 0.0.2 → 0.0.5

package/README.md

@@ -0,0 +1,53 @@
+# React slider
+
+This package contains a basic modern slider. The purpose of this slider is to provide a simple React component
+which can be controlled in a userfriendly way on mobile, tablet and desktop. 
+
+This slider has the following features: 
+
+- Free scroll on mobile with native CSS scroll snapping
+- Drag to scroll on devices with a mouse
+- Buttons to navigate on devices with a mouse
+- Support for multiple variable width slides
+
+Before using this slider, please consider the following:
+- The slider only contains styling to make it functional
+- There is no configuration of aforementioned features (yet)
+
+All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) are supported.
+
+## Installation
+
+### npm
+
+`npm install @yoursurprisecom/slider --save`
+
+### yarn
+
+`yarn add @yoursurprisecom/slider`
+
+### Import the CSS files
+
+`import "@yoursurprisecom/slider/dist/index.css";`
+
+### Implement the Slider
+
+```
+import Slider from '@yoursurprisecom/slider';
+import '@yoursurprisecom/slider/dist/index.css';
+
+export default function YourComponent() {
+    return (
+        <Slider>
+            <div>1</div>
+            <div>2</div>
+            <div>3</div>
+            <div>4</div>
+        </Slider>
+    );
+}
+```
+
+
+
+

package/dist/esm/index.css

@@ -1,2 +1,80 @@
-.slider{position:relative}.slider__button{bottom:0;display:none;height:48px;margin:auto 0;position:absolute;top:0;width:48px}@media (hover:hover){.slider__button{display:flex}}.slider__button--next{right:-8px}@media screen and (min-width:768px){.slider__button--next{right:0}}.slider__button--prev{left:-8px}@media screen and (min-width:768px){.slider__button--prev{left:0}}.slider__wrapper{-ms-overflow-style:none;display:flex;flex-direction:row;margin:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}.slider__wrapper::-webkit-scrollbar{display:none}@media screen and (min-width:768px){.slider__wrapper{margin:8px}}@media (hover:hover){.slider__wrapper{scroll-snap-type:none}}.slider__wrapper.is-scrollable{cursor:move}.slider__wrapper.is-dragging{cursor:grabbing;user-select:none}.slider__wrapper:not(.is-dragging){scroll-behavior:smooth}.slider__wrapper__slide{margin-right:8px;scroll-snap-align:start}@media screen and (min-width:768px){.slider__wrapper__slide{margin-left:0;margin-right:16px}}.slider__wrapper__slide:last-child{margin-right:0}
+.slider {
+  position: relative;
+}
+.slider__button {
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  height: 48px;
+  width: 48px;
+  position: absolute;
+  display: none;
+}
+@media (hover: hover) {
+  .slider__button {
+    display: flex;
+  }
+}
+.slider__button--next {
+  right: -8px;
+}
+@media screen and (min-width: 768px) {
+  .slider__button--next {
+    right: 0;
+  }
+}
+.slider__button--prev {
+  left: -8px;
+}
+@media screen and (min-width: 768px) {
+  .slider__button--prev {
+    left: 0;
+  }
+}
+.slider__wrapper {
+  overscroll-behavior-x: contain;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  margin: 16px;
+  scroll-snap-type: x proximity;
+}
+.slider__wrapper::-webkit-scrollbar {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  .slider__wrapper {
+    margin: 8px;
+  }
+}
+@media (hover: hover) {
+  .slider__wrapper {
+    scroll-snap-type: initial;
+  }
+}
+.slider__wrapper.is-scrollable {
+  cursor: move;
+}
+.slider__wrapper.is-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+.slider__wrapper:not(.is-dragging) {
+  scroll-behavior: smooth;
+}
+.slider__wrapper__slide {
+  scroll-snap-align: start;
+  margin-right: 8px;
+}
+@media screen and (min-width: 768px) {
+  .slider__wrapper__slide {
+    margin-left: 0;
+    margin-right: 16px;
+  }
+}
+.slider__wrapper__slide:last-child {
+  margin-right: 0;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/esm/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA,QACE,iBACF,CACA,gBAEE,QAAS,CAKT,YAAa,CAHb,WAAY,CADZ,aAAc,CAGd,iBAAkB,CALlB,KAAM,CAIN,UAGF,CACA,qBACE,gBACE,YACF,CACF,CACA,sBACE,UACF,CACA,oCACE,sBACE,OACF,CACF,CACA,sBACE,SACF,CACA,oCACE,sBACE,MACF,CACF,CACA,iBAEE,uBAAwB,CAExB,YAAa,CACb,kBAAmB,CAEnB,WAAY,CADZ,eAAgB,CALhB,6BAA8B,CAO9B,4BAA6B,CAL7B,oBAMF,CACA,oCACE,YACF,CACA,oCACE,iBACE,UACF,CACF,CACA,qBACE,iBACE,qBACF,CACF,CACA,+BACE,WACF,CACA,6BACE,eAAgB,CAChB,gBACF,CACA,mCACE,sBACF,CACA,wBAEE,gBAAiB,CADjB,uBAEF,CACA,oCACE,wBACE,aAAc,CACd,iBACF,CACF,CACA,mCACE,cACF","file":"index.css","sourcesContent":[".slider {\n  position: relative;\n}\n.slider__button {\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  height: 48px;\n  width: 48px;\n  position: absolute;\n  display: none;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--next {\n  right: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--next {\n    right: 0;\n  }\n}\n.slider__button--prev {\n  left: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--prev {\n    left: 0;\n  }\n}\n.slider__wrapper {\n  overscroll-behavior-x: contain;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n  margin: 16px;\n  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper {\n    margin: 8px;\n  }\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper__slide {\n  scroll-snap-align: start;\n  margin-right: 8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper__slide {\n    margin-left: 0;\n    margin-right: 16px;\n  }\n}\n.slider__wrapper__slide:last-child {\n  margin-right: 0;\n}"]}
+{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,MAAM;EACN,SAAS;EACT,cAAc;EACd,YAAY;EACZ,WAAW;EACX,kBAAkB;EAClB,aAAa;AACf;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,WAAW;AACb;AACA;EACE;IACE,QAAQ;EACV;AACF;AACA;EACE,UAAU;AACZ;AACA;EACE;IACE,OAAO;EACT;AACF;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,YAAY;EACZ,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,WAAW;EACb;AACF;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB;AACA;EACE,uBAAuB;AACzB;AACA;EACE,wBAAwB;EACxB,iBAAiB;AACnB;AACA;EACE;IACE,cAAc;IACd,kBAAkB;EACpB;AACF;AACA;EACE,eAAe;AACjB","file":"index.css","sourcesContent":[".slider {\n  position: relative;\n}\n.slider__button {\n  top: 0;\n  bottom: 0;\n  margin: auto 0;\n  height: 48px;\n  width: 48px;\n  position: absolute;\n  display: none;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--next {\n  right: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--next {\n    right: 0;\n  }\n}\n.slider__button--prev {\n  left: -8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__button--prev {\n    left: 0;\n  }\n}\n.slider__wrapper {\n  overscroll-behavior-x: contain;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n  margin: 16px;\n  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper {\n    margin: 8px;\n  }\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper__slide {\n  scroll-snap-align: start;\n  margin-right: 8px;\n}\n@media screen and (min-width: 768px) {\n  .slider__wrapper__slide {\n    margin-left: 0;\n    margin-right: 16px;\n  }\n}\n.slider__wrapper__slide:last-child {\n  margin-right: 0;\n}"]}

package/dist/{cjs/src → esm}/index.d.ts

@@ -1,2 +1,2 @@
 import { Slider } from './Slider';
-export default Slider;
+export { Slider };