Problem with AutoplaySlider and avif files about react-awesome-slider

[trolit]

Hi. If you(or someone else) still wonder how to make that work with that particular slider, I've digged through some code and found out that you would have to reach react-awesome-slider/dist/index.js and add avif to extend regular expression:

If you reach that file and look for

e.match(/\.(png|jp(e)?g|gif|webp)/i)

you will get 2 matches. You want to extend second match (see picture below) with |avif as changing first one does not give any results

e.match(/\.(png|jp(e)?g|gif|webp|avif)/i)

Changes to node modules aren't persistent and are bad idea due to npm install resetting it, but there is some cool library patch-package that checks for changes made to node modules and creates in your project patches dir with changes that are persistent!

After making mentioned change and installing patch-package run following command:

npx patch-package react-awesome-slider

and voila! You get persistent change and working .avif images. Idea with patch-package found at stack: https://stackoverflow.com/a/62567504 so if you got account and like the approach, mark answer as useful :)

PS:

I've tested that out on standard slider:

<AwesomeSlider className="awesome-slider">
              <div data-src="img/test.avif" />
              <div data-src="img/test2.avif" />
</AwesomeSlider>