Can't get tiny-slider-react functionality to work

Question

Can't get the npm package tiny-slider-react to work. Probably doing something basic wrong. It imports just fine without any errors, but it only displays the loadingimages without any functionality, just as if the images would be if you'd do <img />. The code is straight from the npm read me file.

import TinySlider from "tiny-slider-react";
import 'tiny-slider/dist/tiny-slider.css';

export default function Testimonials() {
    const settings = {
        lazyload: true,
        nav: true,
        mouseDrag: true
        };
    const imgs = [
    "https://source.unsplash.com/random/200x400",
    "https://source.unsplash.com/random/200x400",
    "https://source.unsplash.com/random/200x400",
    "https://source.unsplash.com/random/200x400",
    ];
    const loadingImage = "https://source.unsplash.com/random/100x100"
    return (
        <section className='h-screen bg-white dark:bg-gray-700'>
            <TinySlider settings={settings}>
                {imgs.map((el, index) => (
                <div key={index} style={{ position: "relative" }}>
                    <img
                    className={`tns-lazy-img`}
                    src={loadingImage}
                    data-src={el}
                    alt=""
                    />
                </div>
                ))}
            </TinySlider>
        </section>
    )
}

I expected it to work like the examples https://codesandbox.io/s/test-tiny-slider-react-forked-rmxcl?file=/index.js:752-784, here's one. I have installed the npm package and I don't think I get any errors in the browser console related to tiny slider. I tried using TinySlider just like OwlCarousel too, so basically just having <img /> props in the <TinySlider /> component, got the same issue.

Could it have something to do with the css file not importing correctly?

score 1 · Accepted Answer · answered Jan 07 '23 at 12:43

In React 18, it seems that TinySlider works normally when it is not wrapped in <StrictMode>.

Demo of the test: codesandbox

If <StrictMode> is still preferred in the same App, perhaps consider to enable it on other parts of the app, as recommended by React document.

TinySlider does not seem to have problems working in older versions of React, by the way.

Can't get tiny-slider-react functionality to work

1 Answers1