@yoursurprise/slider 0.0.21 → 1.0.1

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 YourSurprise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,4 +1,4 @@
-# React slider (alpha)
+# 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. 
@@ -12,18 +12,15 @@ This slider has the following features:
 - Buttons to navigate on devices with a mouse
 - Support for multiple variable width slides
 
-Before using this slider, please consider the following:
-- This project is still being set up, this is an alpha version
-- The slider only contains styling to make it functional
-- There is no configuration of most aforementioned features (yet)
-
-Todos:
+Todos (help appreciated):
 - ~~Add a demo page~~
 - Add more configuration
 - Add end-to-end tests
 - ~~Set up proper workflows in GitHub~~
 - ~~Set the GitHub repository to public~~
 - Support more browsers
+- Improve accessibility
+- Reduce amount of required tooling
 
 All browsers with [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) will be supported, as of right now, only the latest versions of browsers are supported.
 

package/dist/Components/Controls/NextButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Button.scss';
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+export declare const NextButton: React.FC<Props>;
+export {};

package/dist/Components/Controls/PreviousButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Button.scss';
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+export declare const PreviousButton: React.FC<Props>;
+export {};

package/dist/Hooks/UseSider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Hooks/UseSlider.d.ts

@@ -0,0 +1,22 @@
+export declare enum Visibility {
+    FULL = 0,
+    PARTIAL = 1,
+    NONE = 2
+}
+export declare enum NavigationDirection {
+    PREV = 0,
+    NEXT = 1
+}
+interface UseSlider {
+    getLeftPositionToScrollTo: (direction: NavigationDirection, slideOffsetLeft: number, wrapperOffsetLeft: number, wrapperWidth: number, slideWidth: number) => number;
+    getVisibilityByIntersectionRatio: (intersectionRatio: number) => Visibility;
+    getFirstVisibleSlideIndex: () => number;
+    getLastVisibleSlideIndex: () => number;
+    addVisibleSlide: (index: number) => void;
+    addPartiallyVisibleSlide: (index: number) => void;
+    sortSlides: () => void;
+    removeVisibleSlide: (index: number) => void;
+    removePartiallyVisibleSlide: (index: number) => void;
+}
+export declare const useSlider: () => UseSlider;
+export {};

package/dist/index.css

@@ -1,6 +1,3 @@
-.slider {
-  position: relative;
-}
 .slider__button {
   position: absolute;
   top: 0;
@@ -19,6 +16,9 @@
   box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);
   transition: box-shadow 0.2s ease-in-out;
 }
+.slider__button__icon {
+  fill: #554c44;
+}
 .slider__button:hover {
   box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);
 }
@@ -36,6 +36,9 @@
 .slider__button--prev {
   left: 5px;
 }
+.slider {
+  position: relative;
+}
 .slider__wrapper {
   overscroll-behavior-x: contain;
   -ms-overflow-style: none;

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;AACpB;AACA;EACE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,YAAY;EACZ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,aAAa;EACb,YAAY;EACZ,aAAa;EACb,iDAAiD;EACjD,uCAAuC;AACzC;AACA;EACE,iDAAiD;AACnD;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,UAAU;AACZ;AACA;EACE,SAAS;AACX;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  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: 48px;\n  width: 48px;\n  margin: auto 0;\n  border-radius: 50%;\n  background-color: white;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: none;\n  border: none;\n  outline: none;\n  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);\n  transition: box-shadow 0.2s ease-in-out;\n}\n.slider__button:hover {\n  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);\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: 5px;\n}\n.slider__button--prev {\n  left: 5px;\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}"]}
+{"version":3,"sources":["Button.scss","Slider.scss"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,YAAY;EACZ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,uBAAuB;EACvB,mBAAmB;EACnB,uBAAuB;EACvB,eAAe;EACf,aAAa;EACb,YAAY;EACZ,aAAa;EACb,iDAAiD;EACjD,uCAAuC;AACzC;AACA;EACE,aAAa;AACf;AACA;EACE,iDAAiD;AACnD;AACA;EACE;IACE,aAAa;EACf;AACF;AACA;EACE,aAAa;AACf;AACA;EACE,UAAU;AACZ;AACA;EACE,SAAS;AACX;ACrCA;EACE,kBAAkB;AACpB;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__button {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: 48px;\n  width: 48px;\n  margin: auto 0;\n  border-radius: 50%;\n  background-color: white;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  display: none;\n  border: none;\n  outline: none;\n  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.1);\n  transition: box-shadow 0.2s ease-in-out;\n}\n.slider__button__icon {\n  fill: #554c44;\n}\n.slider__button:hover {\n  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, 0.2);\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: 5px;\n}\n.slider__button--prev {\n  left: 5px;\n}",".slider {\n  position: relative;\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/dist/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback, Children } from 'react';
 
 var classnamesExports = {};
@@ -66,22 +66,82 @@ var classnames = {
 
 var classNames = classnamesExports;
 
-var Visbility;
-(function (Visbility) {
-    Visbility[Visbility["FULL"] = 0] = "FULL";
-    Visbility[Visbility["PARTIAL"] = 1] = "PARTIAL";
-    Visbility[Visbility["NONE"] = 2] = "NONE";
-})(Visbility || (Visbility = {}));
+const NextButton = ({ onClick, isHidden }) => {
+    return (jsx("button", { "aria-label": "Next slide", type: "button", onClick: onClick, "aria-hidden": isHidden, className: classNames([
+            'slider__button',
+            'slider__button--next',
+            { 'slider__button--hidden': isHidden },
+        ]), children: jsx("svg", { className: "slider__button__icon", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z" }) }) }));
+};
+
+const PreviousButton = ({ onClick, isHidden }) => {
+    return (jsx("button", { "aria-label": "Previous slide", type: "button", onClick: onClick, "aria-hidden": isHidden, className: classNames([
+            'slider__button',
+            'slider__button--prev',
+            { 'slider__button--hidden': isHidden },
+        ]), children: jsx("svg", { className: "slider__button__icon", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z" }) }) }));
+};
+
+var Visibility;
+(function (Visibility) {
+    Visibility[Visibility["FULL"] = 0] = "FULL";
+    Visibility[Visibility["PARTIAL"] = 1] = "PARTIAL";
+    Visibility[Visibility["NONE"] = 2] = "NONE";
+})(Visibility || (Visibility = {}));
 var NavigationDirection;
 (function (NavigationDirection) {
     NavigationDirection[NavigationDirection["PREV"] = 0] = "PREV";
     NavigationDirection[NavigationDirection["NEXT"] = 1] = "NEXT";
 })(NavigationDirection || (NavigationDirection = {}));
+const useSlider = () => {
+    const visibleSlideIndices = useRef([]);
+    const partiallyVisibleSlideIndices = useRef([]);
+    const getFirstVisibleSlideIndex = () => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
+    const getLastVisibleSlideIndex = () => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
+        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
+    const addVisibleSlide = (index) => visibleSlideIndices.current.push(index);
+    const addPartiallyVisibleSlide = (index) => partiallyVisibleSlideIndices.current.push(index);
+    const removePartiallyVisibleSlide = (index) => partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+    const removeVisibleSlide = (index) => visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+    const sortSlides = () => {
+        visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
+        partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+    };
+    const getLeftPositionToScrollTo = (direction, slideOffsetLeft, wrapperOffsetLeft, wrapperWidth, slideWidth) => {
+        let scrollLeft = 0;
+        if (direction === NavigationDirection.PREV) {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft - wrapperWidth + slideWidth;
+        }
+        else {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft;
+        }
+        return scrollLeft;
+    };
+    const getVisibilityByIntersectionRatio = (intersectionRatio) => {
+        if (intersectionRatio >= 0.9) {
+            return Visibility.FULL;
+        }
+        if (intersectionRatio >= 0.5) {
+            return Visibility.PARTIAL;
+        }
+        return Visibility.NONE;
+    };
+    return {
+        addVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        removeVisibleSlide,
+        sortSlides,
+        getFirstVisibleSlideIndex,
+        getLastVisibleSlideIndex,
+        getLeftPositionToScrollTo,
+        getVisibilityByIntersectionRatio,
+    };
+};
+
 const Slider = ({ children, hideNavigationButtons = false }) => {
     const slides = useRef([]);
     const wrapper = useRef(null);
-    const visibleSlideIndices = useRef([]);
-    const partiallyVisibleSlideIndices = useRef([]);
     const [nextArrowVisible, setNextArrowVisible] = useState(false);
     const [prevArrowVisible, setPrevArrowVisible] = useState(false);
     const [isScrollable, setIsScrollable] = useState(false);
@@ -91,8 +151,7 @@ const Slider = ({ children, hideNavigationButtons = false }) => {
         clientX: 0,
         scrollX: 0,
     });
-    const arrowPrevRef = useRef(null);
-    const arrowNextRef = useRef(null);
+    const { getLeftPositionToScrollTo, getVisibilityByIntersectionRatio, addVisibleSlide, addPartiallyVisibleSlide, getLastVisibleSlideIndex, sortSlides, getFirstVisibleSlideIndex, removeVisibleSlide, removePartiallyVisibleSlide, } = useSlider();
     useEffect(() => {
         const currentWrapper = wrapper.current;
         if (!currentWrapper) {
@@ -126,9 +185,7 @@ const Slider = ({ children, hideNavigationButtons = false }) => {
         }
         setIsBlockingClicks(false);
     };
-    const mouseUpHandler = () => {
-        setIsDragging(false);
-    };
+    const mouseUpHandler = () => setIsDragging(false);
     const mouseDownHandler = (event) => {
         setMousePosition({
             ...mousePosition,
@@ -149,26 +206,14 @@ const Slider = ({ children, hideNavigationButtons = false }) => {
     const addSlide = (node, index) => {
         slides.current[index] = {
             element: node,
-            visibility: Visbility.NONE,
+            visibility: Visibility.NONE,
         };
     };
-    const getFirstVisibleSlideIndex = () => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
-    const getLastVisibleSlideIndex = () => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
-        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
     const setControlsVisibility = useCallback(() => {
         const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
         setPrevArrowVisible(getFirstVisibleSlideIndex() > 0 && isScrollable);
         setNextArrowVisible(isScrollable && lastSlideFullyVisible === false);
-    }, [isScrollable]);
-    const getVisibilityByIntersectionRatio = (intersectionRatio) => {
-        if (intersectionRatio >= 0.9) {
-            return Visbility.FULL;
-        }
-        if (intersectionRatio >= 0.5) {
-            return Visbility.PARTIAL;
-        }
-        return Visbility.NONE;
-    };
+    }, [getFirstVisibleSlideIndex, getLastVisibleSlideIndex, isScrollable]);
     useEffect(() => {
         if (!wrapper.current) {
             return () => { };
@@ -177,21 +222,11 @@ const Slider = ({ children, hideNavigationButtons = false }) => {
             entries.forEach((entry) => {
                 const target = entry.target;
                 const index = Number(target.dataset.slideIndex);
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.FULL) {
-                    visibleSlideIndices.current.push(index);
-                }
-                else {
-                    visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.PARTIAL) {
-                    partiallyVisibleSlideIndices.current.push(index);
-                }
-                else {
-                    partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
+                const visibility = getVisibilityByIntersectionRatio(entry.intersectionRatio);
+                visibility === Visibility.FULL ? addVisibleSlide(index) : removeVisibleSlide(index);
+                visibility === Visibility.PARTIAL ? addPartiallyVisibleSlide(index) : removePartiallyVisibleSlide(index);
             });
-            visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
-            partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+            sortSlides();
             if (hideNavigationButtons === false) {
                 setControlsVisibility();
             }
@@ -202,23 +237,27 @@ const Slider = ({ children, hideNavigationButtons = false }) => {
         });
         slides.current.forEach(({ element }) => intersectionObserver.observe(element));
         return () => intersectionObserver.disconnect();
-    }, [wrapper, setControlsVisibility, hideNavigationButtons]);
+    }, [
+        wrapper,
+        setControlsVisibility,
+        hideNavigationButtons,
+        sortSlides,
+        addVisibleSlide,
+        removeVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        getVisibilityByIntersectionRatio,
+    ]);
     const navigate = (direction) => {
         if (!wrapper.current) {
             return;
         }
         const targetSlideIndex = direction === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
         const targetSlide = slides.current[targetSlideIndex];
-        let scrollLeft = 0;
         if (!targetSlide) {
             return;
         }
-        if (direction === NavigationDirection.PREV) {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft - wrapper.current.clientWidth + targetSlide.element.clientWidth;
-        }
-        else {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft;
-        }
+        const scrollLeft = getLeftPositionToScrollTo(direction, targetSlide.element.offsetLeft, wrapper.current.offsetLeft, wrapper.current.clientWidth, targetSlide.element.clientWidth);
         wrapper.current.scrollTo({ behavior: 'smooth', left: scrollLeft, top: 0 });
     };
     return (jsxs("div", { className: "slider", children: [jsx("div", { role: "list", ref: wrapper, onMouseDown: mouseDownHandler, onMouseMove: mouseMoveHandler, onMouseUp: mouseUpHandler, onClickCapture: blockChildClickHandler, className: classNames('slider__wrapper', {
@@ -226,15 +265,7 @@ const Slider = ({ children, hideNavigationButtons = false }) => {
                     'is-dragging': isDragging,
                 }), children: Children.map(children, (child, index) => (jsx("div", { className: "slider__wrapper__slide", role: "listitem", "data-slide-index": index, ref: (node) => { if (node) {
                         addSlide(node, index);
-                    } }, children: child }, index))) }), hideNavigationButtons === false && (jsx("button", { "aria-label": "Previous slide", type: "button", onClick: () => navigate(NavigationDirection.PREV), ref: arrowPrevRef, "aria-hidden": prevArrowVisible === false, className: classNames([
-                    'slider__button',
-                    'slider__button--prev',
-                    { 'slider__button--hidden': prevArrowVisible === false },
-                ]), children: jsx("svg", { fill: "#554c44", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z" }) }) })), hideNavigationButtons === false && (jsx("button", { "aria-label": "Next slide", type: "button", onClick: () => navigate(NavigationDirection.NEXT), ref: arrowNextRef, "aria-hidden": nextArrowVisible === false, className: classNames([
-                    'slider__button',
-                    'slider__button--next',
-                    { 'slider__button--hidden': nextArrowVisible === false },
-                ]), children: jsx("svg", { fill: "#554c44", xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 256 256", children: jsx("path", { d: "M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z" }) }) }))] }));
+                    } }, children: child }, index))) }), hideNavigationButtons === false && (jsxs(Fragment, { children: [jsx(PreviousButton, { onClick: () => navigate(NavigationDirection.PREV), isHidden: prevArrowVisible === false }), jsx(NextButton, { onClick: () => navigate(NavigationDirection.NEXT), isHidden: nextArrowVisible === false })] }))] }));
 };
 
 export { Slider };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/classnames/index.js","../src/Slider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n",null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../node_modules/classnames/index.js","../src/Components/Controls/NextButton.tsx","../src/Components/Controls/PreviousButton.tsx","../src/Hooks/UseSlider.ts","../src/Slider.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n",null,null,null,null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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","x_google_ignoreList":[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoursurprise/slider",
-  "version": "0.0.21",
+  "version": "1.0.1",
   "description": "Basic React slider using modern Javascript and CSS",
   "module": "dist/index.js",
   "main": "dist/index.js",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@parcel/transformer-sass": "^2.8.3",
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
@@ -40,33 +40,33 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.0",
-    "@types/react": "^18.0.21",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "babel-jest": "^29.2.2",
-    "eslint": "^8.26.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.0.28",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "babel-jest": "^29.5.0",
+    "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^5.9.1",
+    "eslint-plugin-testing-library": "^5.10.2",
     "gh-pages": "^5.0.0",
-    "jest": "^29.2.2",
-    "jest-environment-jsdom": "^29.2.2",
-    "npm": "^8.19.3",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "npm": "^8.19.4",
     "parcel": "^2.8.3",
     "postcss": "^8.4.18",
     "process": "^0.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "rollup": "^3.2.5",
+    "rollup": "^3.20.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.56.0",
+    "sass": "^1.60.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4"
   },

package/src/Components/Controls/Button.scss

@@ -0,0 +1,42 @@
+.slider__button {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 48px;
+  width: 48px;
+  margin: auto 0;
+  border-radius: 50%;
+  background-color: white;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  display: none;
+  border: none;
+  outline: none;
+  box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .1);
+  transition: box-shadow .2s ease-in-out;
+
+  &__icon {
+    fill: #554c44;
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .2);
+  }
+
+  @media (hover: hover) {
+    display: flex;
+  }
+
+  &--hidden {
+    display: none;
+  }
+
+  &--next {
+    right: 5px;
+  }
+
+  &--prev {
+    left: 5px;
+  }
+}

package/src/Components/Controls/NextButton.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import './Button.scss';
+
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+
+export const NextButton: React.FC<Props> = ({ onClick, isHidden }) => {
+    return (
+        <button
+            aria-label="Next slide"
+            type="button"
+            onClick={onClick}
+            aria-hidden={isHidden}
+            className={classNames([
+                'slider__button',
+                'slider__button--next',
+                { 'slider__button--hidden': isHidden },
+            ])}
+        >
+            <svg className="slider__button__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+                <path d="M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z"/>
+            </svg>
+        </button>
+    );
+};

package/src/Components/Controls/PreviousButton.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import './Button.scss';
+
+interface Props {
+    onClick: () => void;
+    isHidden: boolean;
+}
+
+export const PreviousButton: React.FC<Props> = ({ onClick, isHidden }) => {
+    return (
+        <button
+            aria-label="Previous slide"
+            type="button"
+            onClick={onClick}
+            aria-hidden={isHidden}
+            className={classNames([
+                'slider__button',
+                'slider__button--prev',
+                { 'slider__button--hidden': isHidden },
+            ])}
+        >
+            <svg className="slider__button__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
+                <path d="M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z"/>
+            </svg>
+        </button>
+    );
+};

package/src/Hooks/UseSider.test.ts

@@ -0,0 +1,123 @@
+import { NavigationDirection, useSlider, Visibility } from './UseSlider';
+import { renderHook } from '@testing-library/react';
+
+describe('UseSlider', () => {
+    describe('keeps track of slides', () => {
+        it('gets the first fully visible slide', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(1);
+            result.current.addVisibleSlide(2);
+            result.current.addVisibleSlide(3);
+
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(2);
+        });
+
+        it('gets the last fully visible slide', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addVisibleSlide(1);
+            result.current.addVisibleSlide(2);
+            result.current.addPartiallyVisibleSlide(3);
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(2);
+        });
+
+
+        it('gets the first partially visible slide when no slide is fully visible', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(1);
+            result.current.addPartiallyVisibleSlide(2);
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(1);
+        });
+
+        it('gets the last visible slide when no slide is fully visible', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(1);
+            result.current.addPartiallyVisibleSlide(2);
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(2);
+        });
+
+
+        it('falls back when first slide is non-existant', () => {
+            const { result } = renderHook(() => useSlider());
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(-1);
+        });
+
+
+        it('falls back when last slide is non-existant', () => {
+            const { result } = renderHook(() => useSlider());
+            expect(result.current.getLastVisibleSlideIndex()).toBe(-1);
+        });
+
+        it('sorts the fully visible slides by index', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addVisibleSlide(3);
+            result.current.addVisibleSlide(2);
+            result.current.addVisibleSlide(1);
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(3);
+            expect(result.current.getLastVisibleSlideIndex()).toBe(1);
+
+            result.current.sortSlides();
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(3);
+        });
+
+        it('sorts the partially fully visible slides by index', () => {
+            const { result } = renderHook(() => useSlider());
+
+            result.current.addPartiallyVisibleSlide(3);
+            result.current.addPartiallyVisibleSlide(2);
+            result.current.addPartiallyVisibleSlide(1);
+
+            expect(result.current.getFirstVisibleSlideIndex()).toBe(3);
+            expect(result.current.getLastVisibleSlideIndex()).toBe(1);
+
+            result.current.sortSlides();
+
+            expect(result.current.getLastVisibleSlideIndex()).toBe(3);
+        });
+    });
+
+    describe('calculations', () => {
+
+        it('calculates the scrollLeft position (next)', () => {
+            const { result } = renderHook(() => useSlider());
+
+            expect(result.current.getLeftPositionToScrollTo(NavigationDirection.NEXT, 200, 50, 1250, 325)).toBe(150);
+        });
+
+        it('calculates the scrollLeft position (prev)', () => {
+            const { result } = renderHook(() => useSlider());
+
+            expect(result.current.getLeftPositionToScrollTo(NavigationDirection.PREV, 875, 50, 1250, 325)).toBe(-100);
+        });
+
+        it('calculates the visibility of a slide', () => {
+            const { result } = renderHook(() => useSlider());
+
+            [
+                [0.0, Visibility.NONE],
+                [0.1, Visibility.NONE],
+                [0.2, Visibility.NONE],
+                [0.3, Visibility.NONE],
+                [0.4, Visibility.NONE],
+                [0.5, Visibility.PARTIAL],
+                [0.6, Visibility.PARTIAL],
+                [0.7, Visibility.PARTIAL],
+                [0.8, Visibility.PARTIAL],
+                [0.9, Visibility.FULL],
+                [1.0, Visibility.FULL],
+            ].forEach(([ratio, expectation]) => {
+                expect(result.current.getVisibilityByIntersectionRatio(ratio)).toBe(expectation);
+            });
+        });
+    });
+});

package/src/Hooks/UseSlider.ts

@@ -0,0 +1,84 @@
+import { useRef } from 'react';
+
+export enum Visibility {
+    FULL,
+    PARTIAL,
+    NONE,
+}
+
+export enum NavigationDirection {
+    PREV,
+    NEXT,
+}
+
+interface UseSlider {
+    getLeftPositionToScrollTo: (direction: NavigationDirection, slideOffsetLeft: number, wrapperOffsetLeft: number, wrapperWidth: number, slideWidth: number) => number;
+    getVisibilityByIntersectionRatio: (intersectionRatio: number) => Visibility;
+    getFirstVisibleSlideIndex: () => number;
+    getLastVisibleSlideIndex: () => number;
+    addVisibleSlide: (index: number) => void;
+    addPartiallyVisibleSlide: (index: number) => void;
+    sortSlides: () => void;
+    removeVisibleSlide: (index: number) => void;
+    removePartiallyVisibleSlide: (index: number) => void;
+}
+
+export const useSlider = (): UseSlider => {
+    const visibleSlideIndices = useRef<number[]>([]);
+    const partiallyVisibleSlideIndices = useRef<number[]>([]);
+
+    const getFirstVisibleSlideIndex = (): number => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
+
+    const getLastVisibleSlideIndex = (): number => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
+        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
+
+    const addVisibleSlide = (index: number) => visibleSlideIndices.current.push(index);
+
+    const addPartiallyVisibleSlide = (index: number) => partiallyVisibleSlideIndices.current.push(index);
+
+    const removePartiallyVisibleSlide = (index: number) => partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+
+    const removeVisibleSlide = (index: number) => visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
+
+    const sortSlides = () => {
+        // Make sure there are no duplicate visible slides, then sort to retain proper order
+        visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
+        partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+    };
+
+    const getLeftPositionToScrollTo = (direction: NavigationDirection, slideOffsetLeft: number, wrapperOffsetLeft: number, wrapperWidth: number, slideWidth: number) => {
+        let scrollLeft = 0;
+
+        if (direction === NavigationDirection.PREV) {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft - wrapperWidth + slideWidth;
+        } else {
+            scrollLeft = slideOffsetLeft - wrapperOffsetLeft;
+        }
+
+        return scrollLeft;
+    };
+
+    const getVisibilityByIntersectionRatio =  (intersectionRatio: number) => {
+        if (intersectionRatio >= 0.9) {
+            return Visibility.FULL;
+        }
+
+        if (intersectionRatio >= 0.5) {
+            return Visibility.PARTIAL;
+        }
+
+        return Visibility.NONE;
+    };
+
+    return {
+        addVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        removeVisibleSlide,
+        sortSlides,
+        getFirstVisibleSlideIndex,
+        getLastVisibleSlideIndex,
+        getLeftPositionToScrollTo,
+        getVisibilityByIntersectionRatio,
+    };
+};

package/src/Slider.scss

@@ -1,45 +1,6 @@
 .slider {
   position: relative;
 
-  &__button {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    height: 48px;
-    width: 48px;
-    margin: auto 0;
-    border-radius: 50%;
-    background-color: white;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    display: none;
-    border: none;
-    outline: none;
-    box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .1);
-    transition: box-shadow .2s ease-in-out;
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(32, 32, 32, .2);
-    }
-
-    @media (hover: hover) {
-      display: flex;
-    }
-
-    &--hidden {
-      display: none;
-    }
-
-    &--next {
-      right: 5px;
-    }
-
-    &--prev {
-      left: 5px;
-    }
-  }
-
   &__wrapper {
 
     // Prevent the browser from going back in history when there is no scroll area left

package/src/Slider.tsx

@@ -2,22 +2,14 @@ import classNames from 'classnames';
 import type React from 'react';
 import type { MouseEvent as ReactMouseEvent, PropsWithChildren } from 'react';
 import { useRef, useEffect, Children, useCallback, useState } from 'react';
+import { NextButton } from './Components/Controls/NextButton';
+import { PreviousButton } from './Components/Controls/PreviousButton';
+import { NavigationDirection, useSlider, Visibility } from './Hooks/UseSlider';
 import './Slider.scss';
 
-enum Visbility {
-    FULL,
-    PARTIAL,
-    NONE,
-}
-
-enum NavigationDirection {
-    PREV,
-    NEXT,
-}
-
 interface SlideVisibilityEntry {
     element: HTMLDivElement;
-    visibility: Visbility;
+    visibility: Visibility;
 }
 
 interface Settings {
@@ -28,8 +20,6 @@ interface Settings {
 export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNavigationButtons = false }) => {
     const slides = useRef<SlideVisibilityEntry[]>([]);
     const wrapper = useRef<HTMLDivElement>(null);
-    const visibleSlideIndices = useRef<number[]>([]);
-    const partiallyVisibleSlideIndices = useRef<number[]>([]);
 
     const [nextArrowVisible, setNextArrowVisible] = useState<boolean>(false);
     const [prevArrowVisible, setPrevArrowVisible] = useState<boolean>(false);
@@ -42,8 +32,17 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
         scrollX: 0,
     });
 
-    const arrowPrevRef = useRef<HTMLButtonElement>(null);
-    const arrowNextRef = useRef<HTMLButtonElement>(null);
+    const {
+        getLeftPositionToScrollTo,
+        getVisibilityByIntersectionRatio,
+        addVisibleSlide,
+        addPartiallyVisibleSlide,
+        getLastVisibleSlideIndex,
+        sortSlides,
+        getFirstVisibleSlideIndex,
+        removeVisibleSlide,
+        removePartiallyVisibleSlide,
+    } = useSlider();
 
     useEffect(() => {
         const currentWrapper = wrapper.current;
@@ -90,9 +89,7 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
         setIsBlockingClicks(false);
     };
 
-    const mouseUpHandler = () => {
-        setIsDragging(false);
-    };
+    const mouseUpHandler = () => setIsDragging(false);
 
     const mouseDownHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
         setMousePosition({
@@ -119,33 +116,16 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
     const addSlide = (node: HTMLDivElement, index: number) => {
         slides.current[index] = {
             element: node,
-            visibility: Visbility.NONE,
+            visibility: Visibility.NONE,
         };
     };
 
-    const getFirstVisibleSlideIndex = (): number => visibleSlideIndices.current[0] ?? partiallyVisibleSlideIndices.current[0] ?? -1;
-
-    const getLastVisibleSlideIndex = (): number => visibleSlideIndices.current[visibleSlideIndices.current.length - 1]
-        ?? partiallyVisibleSlideIndices.current[partiallyVisibleSlideIndices.current.length - 1] ?? -1;
-
     const setControlsVisibility = useCallback(() => {
         const lastSlideFullyVisible = getLastVisibleSlideIndex() + 1 === slides.current.length;
 
         setPrevArrowVisible(getFirstVisibleSlideIndex() > 0 && isScrollable);
         setNextArrowVisible(isScrollable && lastSlideFullyVisible === false);
-    }, [isScrollable]);
-
-    const getVisibilityByIntersectionRatio = (intersectionRatio: number) => {
-        if (intersectionRatio >= 0.9) {
-            return Visbility.FULL;
-        }
-
-        if (intersectionRatio >= 0.5) {
-            return Visbility.PARTIAL;
-        }
-
-        return Visbility.NONE;
-    };
+    }, [getFirstVisibleSlideIndex, getLastVisibleSlideIndex, isScrollable]);
 
     useEffect(() => {
         if (!wrapper.current) {
@@ -156,23 +136,13 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
             entries.forEach((entry: IntersectionObserverEntry) => {
                 const target = entry.target as HTMLDivElement;
                 const index = Number(target.dataset.slideIndex);
+                const visibility = getVisibilityByIntersectionRatio(entry.intersectionRatio);
 
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.FULL) {
-                    visibleSlideIndices.current.push(index);
-                } else {
-                    visibleSlideIndices.current = visibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
-
-                if (getVisibilityByIntersectionRatio(entry.intersectionRatio) === Visbility.PARTIAL) {
-                    partiallyVisibleSlideIndices.current.push(index);
-                } else {
-                    partiallyVisibleSlideIndices.current = partiallyVisibleSlideIndices.current.filter((slideIndex) => slideIndex !== index);
-                }
+                visibility === Visibility.FULL ? addVisibleSlide(index) : removeVisibleSlide(index);
+                visibility === Visibility.PARTIAL ? addPartiallyVisibleSlide(index) : removePartiallyVisibleSlide(index);
             });
 
-            // Make sure there are no duplicate visible slides, then sort to retain proper order
-            visibleSlideIndices.current = [...new Set(visibleSlideIndices.current)].sort((a, b) => a - b);
-            partiallyVisibleSlideIndices.current = [...new Set(partiallyVisibleSlideIndices.current)].sort((a, b) => a - b);
+            sortSlides();
 
             if (hideNavigationButtons === false) {
                 setControlsVisibility();
@@ -187,7 +157,17 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
         slides.current.forEach(({ element }) => intersectionObserver.observe(element));
 
         return () => intersectionObserver.disconnect();
-    }, [wrapper, setControlsVisibility, hideNavigationButtons]);
+    }, [
+        wrapper,
+        setControlsVisibility,
+        hideNavigationButtons,
+        sortSlides,
+        addVisibleSlide,
+        removeVisibleSlide,
+        addPartiallyVisibleSlide,
+        removePartiallyVisibleSlide,
+        getVisibilityByIntersectionRatio,
+    ]);
 
     const navigate = (direction: NavigationDirection) => {
         if (!wrapper.current) {
@@ -195,19 +175,19 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
         }
 
         const targetSlideIndex = direction === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
-
         const targetSlide = slides.current[targetSlideIndex];
-        let scrollLeft = 0;
 
         if (!targetSlide) {
             return;
         }
 
-        if (direction === NavigationDirection.PREV) {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft - wrapper.current.clientWidth + targetSlide.element.clientWidth;
-        } else {
-            scrollLeft = targetSlide.element.offsetLeft - wrapper.current.offsetLeft;
-        }
+        const scrollLeft = getLeftPositionToScrollTo(
+            direction,
+            targetSlide.element.offsetLeft,
+            wrapper.current.offsetLeft,
+            wrapper.current.clientWidth,
+            targetSlide.element.clientWidth,
+        );
 
         wrapper.current.scrollTo({ behavior: 'smooth', left: scrollLeft, top: 0 });
     };
@@ -231,40 +211,10 @@ export const Slider: React.FC<PropsWithChildren<Settings>> = ({ children, hideNa
                 ))}
             </div>
             { hideNavigationButtons === false && (
-                <button
-                    aria-label="Previous slide"
-                    type="button"
-                    onClick={() => navigate(NavigationDirection.PREV)}
-                    ref={arrowPrevRef}
-                    aria-hidden={prevArrowVisible === false}
-                    className={classNames([
-                        'slider__button',
-                        'slider__button--prev',
-                        { 'slider__button--hidden': prevArrowVisible === false },
-                    ])}
-                >
-                    <svg fill="#554c44" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
-                        <path d="M160,216a8.5,8.5,0,0,1-5.7-2.3l-80-80a8.1,8.1,0,0,1,0-11.4l80-80a8.1,8.1,0,0,1,11.4,11.4L91.3,128l74.4,74.3a8.1,8.1,0,0,1,0,11.4A8.5,8.5,0,0,1,160,216Z"/>
-                    </svg>
-                </button>
-            )}
-            { hideNavigationButtons === false && (
-                <button
-                    aria-label="Next slide"
-                    type="button"
-                    onClick={() => navigate(NavigationDirection.NEXT)}
-                    ref={arrowNextRef}
-                    aria-hidden={nextArrowVisible === false}
-                    className={classNames([
-                        'slider__button',
-                        'slider__button--next',
-                        { 'slider__button--hidden': nextArrowVisible === false },
-                    ])}
-                >
-                    <svg fill="#554c44" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
-                        <path d="M96,216a8.5,8.5,0,0,1-5.7-2.3,8.1,8.1,0,0,1,0-11.4L164.7,128,90.3,53.7a8.1,8.1,0,0,1,11.4-11.4l80,80a8.1,8.1,0,0,1,0,11.4l-80,80A8.5,8.5,0,0,1,96,216Z"/>
-                    </svg>
-                </button>
+                <>
+                    <PreviousButton onClick={() => navigate(NavigationDirection.PREV)} isHidden={prevArrowVisible === false}/>
+                    <NextButton onClick={() => navigate(NavigationDirection.NEXT)} isHidden={nextArrowVisible === false}/>
+                </>
             )}
         </div>
     );