jechav / tiny-slider-react

wrapper of tiny-slider plugin for react.
https://tiny-slider-react-tests.netlify.app/
47 stars 27 forks source link

goTo method stops working; displayIndex stops updating #9

Closed d3haynes closed 4 years ago

d3haynes commented 5 years ago

I created a component for my slider, which I am using as a navbar - below is the render:

`render() { const {dashboard, navs} = this.props;

    const url = parseUrl();

    let start_index = 0;
    if ('home' === url.urlPart(0)) {
        const section_slug = url.urlPart(1);

        const idx = navs.findIndex( nav => {
            if (nav.hasOwnProperty('section')) {
                return(nav.section.slug === section_slug);
            }
        });

        if (idx >= 0) {
            start_index = idx;
        }
    }

    const slider_settings = {
        nav: false,
        arrowKeys: false,
        controls: false,
        mouseDrag: true,
        autoWidth: true,
        loop: false,
        items: 3,
        startIndex: start_index
    };

    return (
        <nav className="component--nav-tabs" id="sticky">
            <div className="component--nav-tabs-overlay">
                <span></span>
                <div className="container">
                    <h1 className="py-3 m-0">{dashboard.name}</h1>
                </div>
            </div>
            <TinySlider
                settings={slider_settings}
                ref={ts => this.ts = ts}
                >
                {navs.map( (nav, index) => {
                    return (
                        <div key={index} style={{ position: "relative" }}>
                            <NavLink onClick={ () => this.handleNavClick(index)} className="nav-item nav-link" to={nav.link()}>
                                {nav.label()}
                            </NavLink>
                        </div>
                        )
                } )}
            </TinySlider>
        </nav>
    );
}`

When an item is selected, I am using the goTo method to activate that slide and also update the settings for my startIndex (this is because each panel that corresponds to a nav item loads content and modals and for some reason once you switch panels and expand a modal an error is returned from the nav component for a null element, so I set the startIndex to the clicked slides index).

I have four nav items - if I log the index of the clicked item in the click event it returns the expected index value. however, the goTo method will not go past the second item. I also am logging the slider info using the getInfo() method on click and the displayIndex, index and indexcached never update beyond the first two items.

I have removed the click event and just implemented a vanilla version of this and am still having the same problem.

Thanks!

jechav commented 4 years ago