@yoursurprise/slider 2.2.0-beta.4 → 2.3.0

package/src/Slider.test.tsx

@@ -1,20 +1,36 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-import { Slider, SliderTypes } from './Slider';
-import React from 'react';
-import API = SliderTypes.API;
-
-const renderSliderWithDimensions = (clientWidth = 1000, scrollWidth = 2000, scrollLeft = 0) => {
+import type { SliderTypes } from './Slider';
+import { Orientation, Slider } from './Slider';
+import React, { ComponentType } from 'react';
+
+type SliderOptions = typeof Slider extends ComponentType<infer T> ? Omit<T, 'children'> : never;
+
+const renderSliderWithDimensions = ({
+    clientWidth = 1000,
+    scrollWidth = 2000,
+    scrollLeft = 0,
+    scrollTop = 0,
+    scrollHeight = 2000,
+    clientHeight = 1000,
+}, sliderOptions: SliderOptions = {}) => {
     Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: clientWidth });
     Object.defineProperty(HTMLElement.prototype, 'scrollWidth', { configurable: true, value: scrollWidth });
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', { configurable: true, value: scrollHeight });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', { configurable: true, value: clientHeight });
     Object.defineProperty(HTMLElement.prototype, 'scrollLeft', {
         configurable: true,
         value: scrollLeft,
         writable: true,
     });
+    Object.defineProperty(HTMLElement.prototype, 'scrollTop', {
+        configurable: true,
+        value: scrollTop,
+        writable: true,
+    });
 
-    render(<Slider>
+    render(<Slider {...sliderOptions}>
         <span key={1}/>
         <span key={2}/>
         <span key={3}/>
@@ -22,7 +38,7 @@ const renderSliderWithDimensions = (clientWidth = 1000, scrollWidth = 2000, scro
     </Slider>);
 };
 
-describe('UpsellSlider', () => {
+describe('Slider', () => {
     let mockIntersectionObserver: jest.Mock<IntersectionObserver, ConstructorParameters<typeof IntersectionObserver>>;
     let observeSpy: jest.Mock;
     let disconnectSpy: jest.Mock;
@@ -72,16 +88,53 @@ describe('UpsellSlider', () => {
         expect(observeSpy).toHaveBeenCalledTimes(children.length);
     });
 
+    it('does not set the container scrollable if the scroll area does not exceed the container width', () => {
+        renderSliderWithDimensions({
+            clientWidth: 200,
+            scrollWidth: 200,
+            clientHeight: 200,
+            scrollHeight: 200,
+        });
+
+        expect(screen.getByRole('list')).not.toHaveClass('slider__wrapper--is-scrollable');
+    });
+
+    it('does not set the container scrollable if the scroll area does not exceed the container height', () => {
+        renderSliderWithDimensions({
+            clientWidth: 200,
+            scrollWidth: 200,
+            clientHeight: 200,
+            scrollHeight: 200,
+        }, {
+            orientation: Orientation.VERTICAL,
+        });
+
+
+        expect(screen.getByRole('list')).not.toHaveClass('slider__wrapper--is-scrollable');
+    });
+
     it('sets the container scrollable if the scroll area exceeds the container width', () => {
-        renderSliderWithDimensions(500, 1000);
+        renderSliderWithDimensions({
+            clientWidth: 500,
+            scrollWidth: 1000,
+            clientHeight: 200,
+            scrollHeight: 200,
+        });
 
-        expect(screen.getByRole('list')).toHaveClass('is-scrollable');
+        expect(screen.getByRole('list')).toHaveClass('slider__wrapper--is-scrollable');
     });
 
-    it('does not set the container scrollable if the scroll area does not exceed the container width', () => {
-        renderSliderWithDimensions(500, 400);
+    it('sets the container scrollable if the scroll area exceeds the container height', () => {
+        renderSliderWithDimensions({
+            clientWidth: 200,
+            scrollWidth: 200,
+            clientHeight: 500,
+            scrollHeight: 1000,
+        }, {
+            orientation: Orientation.VERTICAL,
+        });
 
-        expect(screen.getByRole('list')).not.toHaveClass('is-scrollable');
+        expect(screen.getByRole('list')).toHaveClass('slider__wrapper--is-scrollable');
     });
 
     it('disconnects the intersection observer on re-render', () => {
@@ -96,7 +149,7 @@ describe('UpsellSlider', () => {
 
     describe('controls', () => {
         it('sets controls visibility initially', () => {
-            renderSliderWithDimensions();
+            renderSliderWithDimensions({});
 
             const nextButton = screen.getByLabelText('Next slide');
             const prevButton = screen.getByLabelText('Previous slide');
@@ -121,18 +174,29 @@ describe('UpsellSlider', () => {
         });
 
         it('allows scrolling by dragging with the mouse', () => {
-            renderSliderWithDimensions();
+            renderSliderWithDimensions({});
 
             const scrollElement = screen.getByRole('list');
 
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseDown(scrollElement);
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseMove(scrollElement, { clientX: 100, clientY: 0 });
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseUp(scrollElement);
+            act(() => fireEvent.mouseDown(scrollElement));
+            act(() => fireEvent.mouseMove(scrollElement, { clientX: 100, clientY: 0 }));
+            act(() => fireEvent.mouseUp(scrollElement));
 
             expect(scrollElement.scrollLeft).toBe(-100);
+            expect(scrollElement.scrollTop).toBe(0);
+        });
+
+        it('allows vertical scrolling by dragging with the mouse', () => {
+            renderSliderWithDimensions({}, { orientation: Orientation.VERTICAL });
+
+            const scrollElement = screen.getByRole('list');
+
+            act(() => fireEvent.mouseDown(scrollElement));
+            act(() => fireEvent.mouseMove(scrollElement, { clientX: 0, clientY: 100 }));
+            act(() => fireEvent.mouseUp(scrollElement));
+
+            expect(scrollElement.scrollTop).toBe(-100);
+            expect(scrollElement.scrollLeft).toBe(0);
         });
 
         it('registers click when not scrolling', async () => {
@@ -144,17 +208,15 @@ describe('UpsellSlider', () => {
 
             const scrollElement = screen.getByRole('list');
 
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseDown(scrollElement);
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseMove(scrollElement, { clientX: 100, clientY: 0 });
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseUp(scrollElement);
+            act(() => fireEvent.mouseDown(scrollElement));
+            act(() => fireEvent.mouseMove(scrollElement, { clientX: 100, clientY: 0 }));
+            act(() => fireEvent.mouseUp(scrollElement));
 
-            // This click is normally triggered when releasing the mouse after scrolling
-            await userEvent.click(scrollElement);
-
-            await userEvent.click(screen.getByTestId('1'));
+            await act(async () => {
+                // This click is normally triggered when releasing the mouse after scrolling
+                await userEvent.click(scrollElement);
+                await userEvent.click(screen.getByTestId('1'));
+            });
 
             await waitFor(() => {
                 expect(clickSpy).toHaveBeenCalledTimes(1);
@@ -164,7 +226,7 @@ describe('UpsellSlider', () => {
 
     describe('sliding', () => {
         it('scrolls to the next slide', async () => {
-            renderSliderWithDimensions();
+            renderSliderWithDimensions({});
 
             const intersectionObserverInstance = getIntersectionObserverInstance();
             const [intersectionCallback] = intersectionObserverInstance;
@@ -192,13 +254,45 @@ describe('UpsellSlider', () => {
                 expect(scrollToSpy).toHaveBeenCalledWith({
                     behavior: 'smooth',
                     left: 200,
-                    top: 0,
+                });
+            });
+        });
+
+        it('scrolls to the next slide vertically', async () => {
+            renderSliderWithDimensions({}, { orientation: Orientation.VERTICAL });
+
+            const intersectionObserverInstance = getIntersectionObserverInstance();
+            const [intersectionCallback] = intersectionObserverInstance;
+
+            const slides = screen.getAllByRole('listitem');
+            const nextButton = screen.getByLabelText('Next slide');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientHeight', { value: 100 * (i + 1) });
+                Object.defineProperty(child, 'offsetTop', { value: 100 * (i + 1) });
+            });
+
+            act(() => {
+                intersectionCallback([
+                    { intersectionRatio: 1, target: slides[0] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0.5, target: slides[1] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0, target: slides[2] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0, target: slides[3] } as unknown as IntersectionObserverEntry,
+                ], mockIntersectionObserver.mock.instances[0]);
+            });
+
+            await userEvent.click(nextButton);
+
+            await waitFor(() => {
+                expect(scrollToSpy).toHaveBeenCalledWith({
+                    behavior: 'smooth',
+                    top: 200,
                 });
             });
         });
 
         it('scrolls to the previous slide', async () => {
-            renderSliderWithDimensions();
+            renderSliderWithDimensions({});
 
             const intersectionObserverInstance = getIntersectionObserverInstance();
             const [intersectionCallback] = intersectionObserverInstance;
@@ -226,7 +320,39 @@ describe('UpsellSlider', () => {
                 expect(scrollToSpy).toHaveBeenCalledWith({
                     behavior: 'smooth',
                     left: -600,
-                    top: 0,
+                });
+            });
+        });
+
+        it('scrolls to the previous slide vertically', async () => {
+            renderSliderWithDimensions({}, { orientation: Orientation.VERTICAL });
+
+            const intersectionObserverInstance = getIntersectionObserverInstance();
+            const [intersectionCallback] = intersectionObserverInstance;
+
+            const slides = screen.getAllByRole('listitem');
+            const prevButton = screen.getByLabelText('Previous slide');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientHeight', { value: 100 * (i + 1) });
+                Object.defineProperty(child, 'offsetTop', { value: 100 * (i + 1) });
+            });
+
+            act(() => {
+                intersectionCallback([
+                    { intersectionRatio: 0, target: slides[0] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0, target: slides[1] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 1, target: slides[2] } as unknown as IntersectionObserverEntry,
+                    { intersectionRatio: 0.5, target: slides[3] } as unknown as IntersectionObserverEntry,
+                ], mockIntersectionObserver.mock.instances[0]);
+            });
+
+            await userEvent.click(prevButton);
+
+            await waitFor(() => {
+                expect(scrollToSpy).toHaveBeenCalledWith({
+                    behavior: 'smooth',
+                    top: -600,
                 });
             });
         });
@@ -274,8 +400,8 @@ describe('UpsellSlider', () => {
     });
 
     describe('scrollToSlide', () => {
-        it('scrolls to the next slide', async () => {
-            const ref = React.createRef<API>();
+        it('scrolls to a specific slide', async () => {
+            const ref = React.createRef<SliderTypes.API>();
             render(<Slider ref={ref}>
                 <span key={1}/>
                 <span key={2}/>
@@ -300,12 +426,72 @@ describe('UpsellSlider', () => {
                 expect(scrollToSpy).toHaveBeenCalledWith({
                     behavior: 'smooth',
                     left: 1500,
-                    top: 0,
+                });
+            });
+        });
+
+        it('scrolls to a specific slide', async () => {
+            const ref = React.createRef<SliderTypes.API>();
+            render(<Slider ref={ref}>
+                <span key={1}/>
+                <span key={2}/>
+                <span key={3}/>
+                <span key={4}/>
+            </Slider>);
+
+            const slides = screen.getAllByRole('listitem');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientWidth', { configurable: true, value: 500 });
+                Object.defineProperty(child, 'offsetLeft', { value: 500 * (i + 1) });
+            });
+
+            act(() => {
+                if (ref.current !== null) {
+                    ref.current.scrollToSlide(2, 'smooth');
+                }
+            });
+
+            await waitFor(() => {
+                expect(scrollToSpy).toHaveBeenCalledWith({
+                    behavior: 'smooth',
+                    left: 1500,
+                });
+            });
+        });
+
+        it('scrolls to a specific slide vertically', async () => {
+            const ref = React.createRef<SliderTypes.API>();
+            render(<Slider ref={ref} orientation={Orientation.VERTICAL}>
+                <span key={1}/>
+                <span key={2}/>
+                <span key={3}/>
+                <span key={4}/>
+            </Slider>);
+
+            const slides = screen.getAllByRole('listitem');
+
+            slides.forEach((child, i) => {
+                Object.defineProperty(child, 'clientHeight', { configurable: true, value: 500 });
+                Object.defineProperty(child, 'offsetTop', { value: 500 * (i + 1) });
+            });
+
+            act(() => {
+                if (ref.current !== null) {
+                    ref.current.scrollToSlide(2, 'smooth');
+                }
+            });
+
+            await waitFor(() => {
+                expect(scrollToSpy).toHaveBeenCalledWith({
+                    behavior: 'smooth',
+                    top: 1500,
                 });
             });
         });
     });
 
+
     describe('initialSlideIndex', () => {
         it('Opens the slider with the initialSlide', async () => {
             render(<Slider initialSlideIndex={2}>
@@ -341,7 +527,7 @@ describe('UpsellSlider', () => {
 
     describe('visible slide indexes', () => {
         it('retrieves the first and last fully visible slide indices', () => {
-            const ref = React.createRef<API>();
+            const ref = React.createRef<SliderTypes.API>();
             render(<Slider ref={ref}>
                 <span key={1}/>
                 <span key={2}/>
@@ -367,52 +553,5 @@ describe('UpsellSlider', () => {
             expect(ref.current!.getLastFullyVisibleSlideIndex()).toBe(2);
         });
     });
-
-    describe('scrollToSlide', () => {
-        it('scrolls to the next slide', async () => {
-            const ref = React.createRef<API>();
-            render(<Slider ref={ref}>
-                <span key={1}/>
-                <span key={2}/>
-                <span key={3}/>
-                <span key={4}/>
-            </Slider>);
-
-            const slides = screen.getAllByRole('listitem');
-
-            slides.forEach((child, i) => {
-                Object.defineProperty(child, 'clientWidth', { configurable: true, value: 500 });
-                Object.defineProperty(child, 'offsetLeft', { value: 500 * (i + 1) });
-            });
-
-            act(() => {
-                if (ref.current !== null) {
-                    ref.current.scrollToSlide(2, 'smooth');
-                }
-            });
-
-            await waitFor(() => {
-                expect(scrollToSpy).toHaveBeenCalledWith({
-                    behavior: 'smooth',
-                    left: 1500,
-                    top: 0,
-                });
-            });
-        });
-    });
-
-    describe('initialSlideIndex', () => {
-        it('Opens the slider with the initialSlide', async () => {
-            render(<Slider initialSlideIndex={2}>
-                <span key={ 1 } data-testid="child-1"/>
-                <span key={ 2 } data-testid="child-2"/>
-                <span key={ 3 } data-testid="child-3"/>
-                <span key={ 4 } data-testid="child-4"/>
-            </Slider>);
-
-            await waitFor(() => {
-                expect(scrollToSpy).toHaveBeenCalledTimes(1);
-            });
-        });
-    });
 });
+

package/src/Slider.tsx

@@ -1,6 +1,15 @@
 import classNames from 'classnames';
 import type { MouseEvent as ReactMouseEvent } from 'react';
-import { Children, forwardRef, PropsWithChildren, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import {
+    Children,
+    forwardRef,
+    PropsWithChildren,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
 import { NextButton } from './Components/Controls/NextButton';
 import { PreviousButton } from './Components/Controls/PreviousButton';
 import { NavigationDirection, useSlider, Visibility } from './Hooks/UseSlider';
@@ -13,12 +22,16 @@ export namespace SliderTypes {
         getLastFullyVisibleSlideIndex(): number;
     }
 }
-
+export enum Orientation {
+    HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical',
+}
 interface Settings {
     // Sets whether the navigation buttons (next/prev) are no longer rendered
     hideNavigationButtons?: boolean;
     initialSlideIndex?: number;
     onSlide?: () => void;
+    orientation?: Orientation,
 }
 
 interface SlideVisibilityEntry {
@@ -26,7 +39,13 @@ interface SlideVisibilityEntry {
     visibility: Visibility;
 }
 
-export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>(({ children, hideNavigationButtons = false, initialSlideIndex = 0, onSlide = () => null }, ref) => {
+export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>(({
+    children,
+    hideNavigationButtons = false,
+    initialSlideIndex = 0,
+    onSlide = () => null,
+    orientation = Orientation.HORIZONTAL,
+}, ref) => {
     const slides = useRef<SlideVisibilityEntry[]>([]);
     const wrapper = useRef<HTMLDivElement | null>(null);
 
@@ -36,13 +55,21 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
     const [isScrollable, setIsScrollable] = useState<boolean>(false);
     const [isDragging, setIsDragging] = useState<boolean>(false);
     const [isBlockingClicks, setIsBlockingClicks] = useState<boolean>(false);
-    const [mousePosition, setMousePosition] = useState<{ clientX: number; scrollX: number }>({
+
+    const [mousePosition, setMousePosition] = useState<{
+        clientX: number;
+        clientY: number
+        scrollX: number;
+        scrollY: number;
+    }>({
         clientX: 0,
+        clientY: 0,
         scrollX: 0,
+        scrollY: 0,
     });
 
     const {
-        getLeftPositionToScrollTo,
+        getPositionToScrollTo,
         getVisibilityByIntersectionRatio,
         addVisibleSlide,
         addPartiallyVisibleSlide,
@@ -51,6 +78,7 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
         getFirstVisibleSlideIndex,
         removeVisibleSlide,
         removePartiallyVisibleSlide,
+        shouldBlockClicks,
     } = useSlider();
 
     const blockChildClickHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
@@ -68,7 +96,9 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
         setMousePosition({
             ...mousePosition,
             clientX: event.clientX,
+            clientY: event.clientY,
             scrollX: wrapper.current?.scrollLeft ?? 0,
+            scrollY: wrapper.current?.scrollTop ?? 0,
         });
 
         setIsDragging(true);
@@ -81,11 +111,22 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
             return;
         }
 
-        if (Math.abs(mousePosition.clientX - event.clientX) > 5) {
-            setIsBlockingClicks(true);
-        }
+        switch (orientation) {
+            case Orientation.HORIZONTAL:
+                if (shouldBlockClicks(mousePosition.clientX - event.clientX)) {
+                    setIsBlockingClicks(true);
+                }
+
+                currentWrapper.scrollLeft = mousePosition.scrollX + mousePosition.clientX - event.clientX;
+                break;
+            case Orientation.VERTICAL:
+                if (shouldBlockClicks(mousePosition.clientY - event.clientY)) {
+                    setIsBlockingClicks(true);
+                }
 
-        currentWrapper.scrollLeft = mousePosition.scrollX + mousePosition.clientX - event.clientX;
+                currentWrapper.scrollTop = mousePosition.scrollY + mousePosition.clientY - event.clientY;
+                break;
+        }
     };
 
     const addSlide = (node: HTMLDivElement, index: number) => {
@@ -103,27 +144,51 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
             return;
         }
 
-        const direction = (index > getFirstVisibleSlideIndex()) ? NavigationDirection.NEXT : NavigationDirection.PREV;
+        const navDirection = (index >= getFirstVisibleSlideIndex()) ? NavigationDirection.NEXT : NavigationDirection.PREV;
+
+        let scrollLeft = undefined;
+        let scrollTop = undefined;
+
+        switch (orientation) {
+            case Orientation.HORIZONTAL:
+                scrollLeft = getPositionToScrollTo(
+                    navDirection,
+                    targetSlide.element.offsetLeft,
+                    currentWrapper.offsetLeft,
+                    currentWrapper.clientWidth,
+                    targetSlide.element.clientWidth,
+                );
+                break;
+            case Orientation.VERTICAL:
+                scrollTop = getPositionToScrollTo(
+                    navDirection,
+                    targetSlide.element.offsetTop,
+                    currentWrapper.offsetTop,
+                    currentWrapper.clientHeight,
+                    targetSlide.element.clientHeight,
+                );
+                break;
+        }
+
+        const scrollOptions: Partial<ScrollToOptions> = {
+            behavior,
+            ...(Number.isInteger(scrollLeft) && { left: scrollLeft } ),
+            ...(Number.isInteger(scrollTop) && { top: scrollTop } ),
+        };
 
-        const scrollLeft = getLeftPositionToScrollTo(
-            direction,
-            targetSlide.element.offsetLeft,
-            currentWrapper.offsetLeft,
-            currentWrapper.clientWidth,
-            targetSlide.element.clientWidth,
-        );
 
-        currentWrapper.scrollTo({ behavior, left: scrollLeft, top: 0 });
+        currentWrapper.scrollTo(scrollOptions);
     };
 
-    const navigate = (direction: NavigationDirection) => {
+    const navigate = (navDirection: NavigationDirection) => {
         const currentWrapper = wrapper.current;
 
         if (!currentWrapper) {
             return;
         }
 
-        const targetSlideIndex = direction === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
+        const targetSlideIndex = navDirection === NavigationDirection.PREV ? getFirstVisibleSlideIndex() - 1 : getLastVisibleSlideIndex() + 1;
+
         scrollToSlide(targetSlideIndex, 'smooth');
     };
 
@@ -141,7 +206,7 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
             return () => {};
         }
 
-        const checkScrollable = () => setIsScrollable(currentWrapper.scrollWidth > currentWrapper.clientWidth);
+        const checkScrollable = () => setIsScrollable(orientation === Orientation.VERTICAL ? currentWrapper.scrollHeight > currentWrapper.clientHeight : currentWrapper.scrollWidth > currentWrapper.clientWidth);
 
         const scrollToInitialSlide = () => {
             if (initialSlideIndex !== 0) {
@@ -151,9 +216,25 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
                     return;
                 }
 
-                const scrollLeft = targetSlide.element.offsetLeft - currentWrapper.offsetLeft;
+                let scrollLeft = undefined;
+                let scrollTop = undefined;
+
+                switch (orientation) {
+                    case Orientation.HORIZONTAL:
+                        scrollLeft = targetSlide.element.offsetLeft - currentWrapper.offsetLeft;
+                        break;
+                    case Orientation.VERTICAL:
+                        scrollTop = targetSlide.element.offsetTop - currentWrapper.offsetTop;
+                        break;
+                }
+
+                const scrollOptions: Partial<ScrollToOptions> = {
+                    behavior: 'instant',
+                    ...(Number.isInteger(scrollLeft) && { left: scrollLeft } ),
+                    ...(Number.isInteger(scrollTop) && { top: scrollTop } ),
+                };
 
-                currentWrapper.scrollTo({ behavior: 'instant', left: scrollLeft, top: 0 });
+                currentWrapper.scrollTo(scrollOptions);
             }
         };
 
@@ -165,7 +246,7 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
         return () => {
             window?.removeEventListener('resize', checkScrollable);
         };
-    }, [wrapper, initialSlideIndex]);
+    }, [wrapper, initialSlideIndex, orientation]);
 
     useEffect(() => {
         const onDocumentMouseUp = (event: MouseEvent) => {
@@ -246,8 +327,10 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
                 onMouseUp={mouseUpHandler}
                 onClickCapture={blockChildClickHandler}
                 className={classNames('slider__wrapper', {
-                    'is-scrollable': isScrollable,
-                    'is-dragging': isDragging,
+                    'slider__wrapper--is-scrollable': isScrollable,
+                    'slider__wrapper--is-dragging': isDragging,
+                    'slider__wrapper--is-horizontal': orientation === Orientation.HORIZONTAL,
+                    'slider__wrapper--is-vertical': orientation === Orientation.VERTICAL,
                 })}
             >
                 {Children.map(children, (child, index: number) => (
@@ -258,8 +341,8 @@ export const Slider = forwardRef<SliderTypes.API, PropsWithChildren<Settings>>((
             </div>
             { !hideNavigationButtons && (
                 <>
-                    <PreviousButton onClick={() => navigate(NavigationDirection.PREV)} isHidden={!prevArrowVisible}/>
-                    <NextButton onClick={() => navigate(NavigationDirection.NEXT)} isHidden={!nextArrowVisible}/>
+                    <PreviousButton onClick={() => navigate(NavigationDirection.PREV)} isHidden={!prevArrowVisible} direction={orientation}/>
+                    <NextButton onClick={() => navigate(NavigationDirection.NEXT)} isHidden={!nextArrowVisible} direction={orientation}/>
                 </>
             )}
         </div>