If I want to set a limit and allow only one slide to be scrolled per drag, I can't, just when clicking the arrows...

When navigating from one route to another using a client-side router (ex: react-router), I am receiving a console error

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

This usually occurs when the page has a glider and the user navigates away from this page. Then when returning to this page (using back button) it crashes.

Details

• Version: 3.1.0
• React: 17.0.2
• Browser: Chrome v102

Hi wonderful package thank you for putting this together.

I am getting the following warning message when using the package:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes. at C:\Users\user\project\node_modules\react-glider\dist\index.js:38:26

Not sure how to resolve.

The type definitions for the events are not correct as there is only a single parameter being passed, the Event. The Context is not in use.

Example:

onSlideVisible?(context: any, event: Event): void;

Should become

onSlideVisible?(event: Event): void;

Hello,

I found react-glider working nicely, but there's no option available for autoplay, where sliders play automatically and also some time interval for autoplay.

Can you update to support React 18? Thank you!

Trying to use this Package with Next 12.2.2 and React 17.0.2 and it's giving me this error. Does this have something to do with not using React 18?

When an event handler is updated, Glider is not reinitialized with the new event handler.

Example

    const [activeSlide, setActiveSlide] = React.useState(1);

    const handleSlideChange = (event: CustomEvent) => {
        console.log(activeSlide); // output: 1

        if (event && event.detail) {
            setActiveSlide({activeSlide: event.detail.slide});
        }
    };

In the example above, we are updating the state variable activeSlide whenever the slide changes, however the value output in the console.log will remain 1, even if the value of activeSlide has changed.

I tried to register to events but none of them are being fired:

  <Glider
    slidesToScroll={5}
    slidesToShow={5}
    draggable={true}
    onRefresh={() => handleOnLoad}
    onLoad={() => handleOnLoad}
    onSlideVisible={() => handleOnLoad}
  >

function handleOnLoad(context: any, event: Event) {
}

from documentation:
/** Called after Glider.js is first initialized /
onLoad?(context: any, event: Event): void;
/* Called whenever a slide a shown. Passed an object containing the slide index /
onSlideVisible?(context: any, event: Event): void;
/* Called whenever Glider.js refreshes it's elements or settings */
onRefresh?(context: any, event: Event): void;

Hi!

It possible to pass "hasArrow" per Responsive Breakpoint?

Example...
I dont need display Arrows on phones but I need display it on tablet... how I can add "hasArrow" prop into component? Only what I see is component allow add only slidesToShow, slidesToScroll (from BreakPoint interface).

I cant use CSS becouse it's more problematic for my case.

Thanks!

Hi, I am trying to figure out a good way to apply a style on the glider track. For example, how to apply a gap: 12px between the slide items and justify-content: center to align the items to the centre of the screen if there are less number of items than the screen allows; I cannot figure out a non-hacky way of doing this in react.

My current implementation involves giving the slider a unique class and then applying a gap: 12px and justify-content: center on the .glider-track under the unique class.

Overview

Hello! I was curious if React 17 support was on the roadmap to be added to react-glider? It appears this warning is not a direct issue with this package, but some dependencies of this package, specifically @reach/auto-id, which has been updated to signify support for React 17.

Thanks!

Package versions

react-glider version: @latest

glider-js exposes two events, glider-slide-visible and glider-slide-hidden which fire when a slide is visible or hidden respectively. On the glider-js package, these fire in all the following three cases:

• Horizontal scrolling (touch or mouse)
• Horizontal scrolling (touch or mouse) with scrollLock: true
• Clicking on the dots

On the react-glider project, the first scenario does not fire any events.
⚠ Horizontal scrolling (touch or mouse)
✅ Horizontal scrolling (touch or mouse) with scrollLock: true
✅ Clicking on the dots

 const gliderRef = useRef(null);
<Glider ref={gliderRef} onSlideVisible={(c,e) => console.log(c,e)} onLoad={(c,e) => console.log(c,e)}>
 {children}
</Glider>

Nothing gets logged to the console.

For example, if we wish to continue specifying a number for slidesToShow and have itemWidth be auto (undefined), itemWidth may need to be updated to allow for undefined

  breakpoint: number;
  settings: {
    slidesToShow: number | 'auto';
    slidesToScroll: number | 'auto';
    itemWidth: number;
    duration: number;
  };
}```

While glider is at its first slide, and you keep dragging previous for example 3 times, you also have to drag forward 3 times before the slider moves again.

https://hipstersmoothie.github.io/react-glider/?path=/story/glider--multiple-item

It is also happening in the storybook.

First off, thanks for the library!

Currently, the arrows prop allows object with keys prev and next which both must be string. However, per the Glider.js documentation, element instances can be passed here as well instead of the selectors. See https://nickpiscitelli.github.io/Glider.js/ -> Settings -> arrows

It'd be great if this library took that into account as well

If we have multiple gliders on same page, the arrows work for first glider but not for the second.

How are you supposed to add options with this wrapper? There is no explanation in the readme, and you can't follow the original documentation because the implementation is not the same.

Hi,

I am using react-glider in my project. I put anchor tag in Glider tag.
i.e.
<Glider><a href="https://example.com" target="_blank">Example</a></Glider>
However, I cannot navigate to the web page. Is there any way to achieve page navigation using react-glider for each slide?

Thanks.

When Glider is unmounted and remounted (for example in the case of a popup or modal) then Glider is not initialized correctly and some artefacts from the previous initialization are present. As a result, it fires glider-slide-visible on all pages even if only one slide is visible.

My glider looks like this

<Glider
    slidesToShow={"auto"}
    itemWidth="220"
    exactWidth
    scrollLock
    draggable
>
    <div>....</div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
    <div>....</div>
</Glider>

However when dragging the glider it goes past the last item, see attached image (red border is for the gliders container)

Initial state

Over glided state

Hi im getting this error from time to time and it seems to be related to glider
everytime the error appears the Glider is gone

im using Nextjs with emotion and mui

anyone ran into this problem?
Thank you

When I try to use this package with preact installed on my gatsby website, I run into the following error:

The issue only arises when the __importStar helper is used. One way to make that happen is to have an import that mixes default and named imports.

The actual problem is inside the __setModuleDefault helper that __importStar calls.

So I have fixed this issue in a fork here => https://github.com/masoodtalha/react-glider

Thoughts? Should I make a PR out of it?

onSlideVisible and onSlideHidden do not fire when slidesToShow == 1. It works well when slidesToShow > 1

Example
https://codesandbox.io/s/react-glider-demo-forked-cvcqtt?file=/src/App.js

Hi,

The bundlesize jumped a bit with the latest release
v2.0.4 is 3.4kB (https://bundlephobia.com/[email protected])
v2.1.0 is 6.3kB (https://bundlephobia.com/[email protected])

Are these bundlephobia sizes appropriate ?

It shows that @reach/utils is included, however does it get tree-shaked ?

Seems like the increase came from @reach/auto-id however bundlesize shows its only 436B

Based on the code in src/index.tsx, this is how you construct the glider config:

{
      ...this.props,
      arrows: this.props.hasArrows
        ? {
            next: '.glider-next',
            prev: '.glider-prev'
          }
        : undefined,
      dots: this.props.hasDots ? '#dots' : undefined
    }

this means, no matter what I put in the props arrows and dots, it will be overridden, e.g.

<Glider
  arrows={{ prev: '.x-my-left', next: 'x-my-next' }}
  dots="x-my-dots"
>

is this intentional?

Trying to run "storybook": "start-storybook -p 9001 -c .storybook" with default config in .storybook folder, but when it opens: http://localhost:9001/?path=/story/* There is nothing there but just the text of: loading source...

In the original package, this is an option (see glidejs/glide#514). Is this available with this wrapper?

Please publish new build to npm registry as its not having glider.destroy there in build

This only affects Storybook, however I would like to resolve it to have a better reference for users.

When a user does not specify a className on Storybook, then the slides have undefined as a class.

<div class="glider-slide **undefined** active center visible" data-gslide="0" style="height: auto; width: 1238px;"><h1>1</h1></div>

I forked the repo to work on it, when I run yarn I get this error:

https://github.com/okonet/listr-update-renderer/tarball/upgrade-log-update: Integrity check failed for "listr-update-renderer" (computed integrity doesn't match our records, got "sha1-Bgc/qTFmJ3YHp4FPTh+DlgCBQUw=")

I searched a bit online and this appears to be related to a specific version of a dependency for lint-staged.

Running yarn upgrade lint-staged fixes it!

Would it be worth including your yarn.lock file in the repo?

Thanks!

I am trying to disable/enable arrows based on the viewport change. currently, i want to hide arrows on small screens and show arrows on screens having viewport sizes greater than tablets .i have tried using the responsive setting for disabling/enabling the arrows based on breakpoints but it's not working .
my code looks like this

const gliderResponsive = [
 {
   breakpoint: 767,
   settings: {
     slidesToShow: 5,
     hasArrows:false,
     slidesToScroll: 1,
   },
 },
 
];
export default function App() {
 return (
   <div className="App">
     <div className="container">
       <Glider responsive={gliderResponsive} hasArrows={true} slidesToShow={1}  scrollLock hasDots draggable>
         <div className="slide">1</div>
         <div className="slide">2</div>
         <div className="slide">3</div>
         <div className="slide">4</div>
         <div className="slide">5</div>
         <div className="slide">6</div>
         <div className="slide">7</div>
         <div className="slide">8</div>
         <div className="slide">9</div>
         <div className="slide">10</div>
         <div className="slide">11</div>
         <div className="slide">12</div>
       </Glider>
     </div>
    
   </div>
 );
}

codesandbox link

Expected behavior:

The carousel updates when the items(children) in the carousel are updated.

Actual behavior:

When updating the items in the carousel the app breaks with the following error:

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Reproduction:

https://codesandbox.io/s/react-glider-issue-xu7nj?file=/src/App.js

We are running Storybook v5 which makes use of deprecated plugins, such as @storybook/addon-knobs.

It is recommended to update to Storybook v6, remove deprecated dependencies and clean up the storybook process.

It uses only the first Glider instance

The following error occurs when the children of the carousel change:
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I believe this is due to the referenced container being modifier by glider.js:

// in render() of index.tsx

<div className={this.props.className} ref={this.ref}>
      {this.props.children}
</div>

// in glider.js

_.track = document.createElement('div')
_.track.className = 'glider-track'
_.ele.appendChild(_.track)
while (_.ele.children.length !== 1) {
    _.track.appendChild(_.ele.children[0])
}

React expects the element to have the children specified in the render() method, but glider.js has inserted a new <div> element and moved the children into it.

When React attempts to update the children, it is unaware of the change made by glider.js and attempts to remove the children it inserted via the render() method. This fails as the children have been moved.

It seems to me that the only way to resolve this issue would require a change to glider.js -- Add an option that prevents glider.js from adding the glider-track automatically, so that it can be manually added in your render() method.

This would look something like:

// in render() of index.tsx

<div className={this.props.className} ref={this.ref}>
    <div className="glider-track">
         {this.props.children}
    </div>
</div>

// in glider.js

if (_.opt.addTrack) {
    _.track = document.createElement('div')
    _.track.className = 'glider-track'
    _.ele.appendChild(_.track)
    while (_.ele.children.length !== 1) {
        _.track.appendChild(_.ele.children[0])
    }
}
else {
    _.track = _ele.children[0]
}

At the moment, before the Glider is initialised, the items in the glider-contain do not appear correct and are shifted as the Glider loads.

The user can choose to:

• Incur a layout shift
• Not show the content until the Glider has initialized

This is related to an issue on Glider.js. See NickPiscitelli/Glider.js#235

Hi there! It would be cool if user could export typings.

Hello, first of all thank you for this package!

I have a minor issue with typings in the plugin. scrollItem() expects number as first parameter in the typing as declared in the package:

scrollItem(slideIndex: number, isActuallyDotIndex?: boolean): void;

However the official glider-js documentation states it can have the following arguments: "Arguments: String | Number, Boolean". So having a string as first argument is also valid. If prev is provided it will slide to the previous slide, otherwise to the next slide it seems.
I currently use it with both prev and next with TypeScript ignore comment because of the package typings. The reason for this use case is because it is used in an event listener on arrow key presses.

Can the parameter for scrollItem() be updated to reflect this?

The class name glider-dots is assigned to the same class multiple times instead of one time. This could be replicated in the storybook demo (all examples) by inspecting the HTML of the element with id="dots".

Effects
This does not cause any visible issues but is semantically incorrect and bloats the HTML.

Priority
Low

Workaround
N/A

Hi,

I am switching from swiper ~140KiB to this library as it ultra-lightweight and don't expect everything to be here but if there is a way to snap the slides to center when swiped or dragged, that would be great.

Current Behaviour
When swiped or dragged, the slides remain in place where they were left off.
They don't snap back to center.

Current Implementation Code

<Glider className="glider-container" draggable hasDots slidesToShow={1}>

Wanted Behaviour
When swiped or dragged the slides snap to center, just like when you click the arrows or dots.

Thanks

react-glider is using componentWillUpdate, which is logging warnings to the console in React 16, as it is deemed an unsafe lifecycle method. In React 17 the method will be deprecated unless renamed as UNSAFE_componentWillUpdate (and thus obviously not recommended by React for use).

See: https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate

I have this codesandbox
with a simple configuration:

<Glider
  slidesToShow={1.3}
  responsive={[
    {
      breakpoint: 700,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 950,
      settings: {
        slidesToShow: 5
      }
    }
  ]}
>
...
</Glider>

It should show 1.3 slides below 700px, then 3 slides up until 950, and after 5.
It works strange. When you load page at > 950 px, shows 1.3 slides on that breakpoint. Others are ok.
When you load at > 700 that one is broken, bigger is ok.
<500 all are ok. Seems like if it loads non-mobile, responsive breakpoint first it copies default opts to it...

This is what object looks like after init on > 950:

I looked a bit through your code and glider-js docs, I think the problem is in

    // When the props update, update the glider
    React.useEffect(() => {
      if (!gliderRef.current) {
        return;
      }

      gliderRef.current.setOption(makeGliderOptions());
      gliderRef.current.refresh(true);
    }, [props]);

setOption(), and that it needs to take 2nd argument as true, to make options global.
Can you check it?

The storybook URL (http://hipstersmoothie.com/react-glider/?selectedKind=Glider&selectedStory=Playground&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel) linked in the project returns a 404.

The gh-pages branch contains a working storybook and the linked URL may be changed to the working https://hipstersmoothie.github.io/react-glider

Hi there, first of all, thanks for this awesome integration!

I think I've found an issue with the arrows prop, when supplying the prop, the arrows won't render. This is especially problematic when working with different gliders on the same page, since they all need distinct arrow selectors.

I think this is the line that's causing arrows to not render:

https://github.com/hipstersmoothie/react-glider/blob/4cb01307c4422eb55a9ed2dea0ea5d18aa6934c1/src/index.tsx#L286

As a workaround I'm running a useLayoutEffect and adding the arrows manually:

// your arrow selector / elements here

 React.useLayoutEffect(() => {
    if (gliderRef.current && arrows) {
      const { prev: prevArrow, next: nextArrow } = arrows
      const container = gliderRef.current.ele.parentElement
      if (container) {
        container.insertBefore(prevArrow, gliderRef.current.ele)
        container.appendChild(nextArrow)
      }
    }
  }, [arrows])

Let me know if this is expected behaviour or actually a bug. If so, I can attempt a PR that also takes care of #36

Storybook is failing when building using Node 17 and upwards.

Console output:

$ yarn storybook
yarn run v1.22.5
$ start-storybook -p 9001 -c .storybook
info @storybook/react v5.3.21
info 
info => Loading presets
info => Loading presets
info => Loading custom manager config.
info => Loading config/preview file in ".storybook".
info => Loading custom Webpack config (full-control mode).
info => Using base config because react-scripts is not installed.
10% building 1/1 modules 0 active(node:166735) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(Use `node --trace-deprecation ...` to show where the warning was created)
10% building 1/2 modules 1 active /home/kevin/git/react-glider/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=truenode:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/kevin/git/react-glider/node_modules/@storybook/core/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/kevin/git/react-glider/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at /home/kevin/git/react-glider/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
    at /home/kevin/git/react-glider/node_modules/graceful-fs/graceful-fs.js:90:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.2.0

The onLoad callback should fire whenever the Glider component is initialized. This is not happening because the glider-loaded event fires before the onLoad event listener is bound to the element.

This could be resolved by calling the onLoad event manually instead of depending on glider-loaded.

Requirements

• Should only fire once unless the Glider is destroyed or unmounted.

Hello

It looks like autoplay isn't a feature in the react component. Is that by design?