@yoursurprise/slider 0.0.16 → 0.0.18

package/README.md

@@ -3,6 +3,8 @@
 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. 
 
+Demo page: https://yoursurprisecom.github.io/slider/
+
 This slider has the following features: 
 
 - Free scroll on mobile with native CSS scroll snapping

package/dist/index.css

@@ -57,4 +57,7 @@
   cursor: grabbing;
   user-select: none;
 }
+.slider__wrapper__slide {
+  scroll-snap-align: start;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"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;EACb,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,yBAAyB;EACzB,uBAAuB;EACvB,eAAe;AACjB;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,QAAQ;AACV;AACA;EACE,OAAO;AACT;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,uBAAuB;AACzB;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB","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  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid #C9C9C9;\n  background-color: white;\n  font-size: 18px;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--hidden {\n  display: none;\n}\n.slider__button--next {\n  right: 0;\n}\n.slider__button--prev {\n  left: 0;\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  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\n}\n.slider__wrapper.is-scrollable {\n  cursor: move;\n}\n.slider__wrapper.is-dragging {\n  cursor: grabbing;\n  user-select: none;\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;EACb,kBAAkB;EAClB,mBAAmB;EACnB,uBAAuB;EACvB,yBAAyB;EACzB,uBAAuB;EACvB,eAAe;AACjB;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,QAAQ;AACV;AACA;EACE,OAAO;AACT;AACA;EACE,8BAA8B;EAC9B,wBAAwB;EACxB,qBAAqB;EACrB,aAAa;EACb,mBAAmB;EACnB,gBAAgB;EAChB,6BAA6B;AAC/B;AACA;EACE,aAAa;AACf;AACA;EACE;IACE,yBAAyB;EAC3B;AACF;AACA;EACE,uBAAuB;AACzB;AACA;EACE,YAAY;AACd;AACA;EACE,gBAAgB;EAChB,iBAAiB;AACnB;AACA;EACE,wBAAwB;AAC1B","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  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid #C9C9C9;\n  background-color: white;\n  font-size: 18px;\n}\n@media (hover: hover) {\n  .slider__button {\n    display: flex;\n  }\n}\n.slider__button--hidden {\n  display: none;\n}\n.slider__button--next {\n  right: 0;\n}\n.slider__button--prev {\n  left: 0;\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  scroll-snap-type: x proximity;\n}\n.slider__wrapper::-webkit-scrollbar {\n  display: none;\n}\n@media (hover: hover) {\n  .slider__wrapper {\n    scroll-snap-type: initial;\n  }\n}\n.slider__wrapper:not(.is-dragging) {\n  scroll-behavior: smooth;\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__slide {\n  scroll-snap-align: start;\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoursurprise/slider",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Basic React slider using modern Javascript and CSS",
   "module": "dist/index.js",
   "main": "dist/index.js",

package/src/Slider.scss

@@ -71,5 +71,9 @@
       cursor: grabbing;
       user-select: none;
     }
+
+    &__slide {
+      scroll-snap-align: start;
+    }
   }
 }