Open realkhanhson opened 2 years ago
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>
I found some problem with avif files, It didn't work with AutoplaySlider
so as you can see, it only loads more than 70% then stop
I'm currently using nextjs 11.1.2, and this is my code.