Problem with AutoplaySlider and avif files

[Nazmer]

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.

import { FC } from 'react'
import style from './ImageSlider.module.css'
import AwesomeSlider from 'react-awesome-slider'
import withAutoplay from 'react-awesome-slider/dist/autoplay'

interface Props {
  className?: string
}

const AutoplaySlider = withAutoplay(AwesomeSlider)

const images = ['/banner/01.avif', '/banner/02.avif']

const ImageSlider: FC<Props> = ({ className }) => {
  return (
    <div className={className}>
      <AutoplaySlider
        // animation="foldOutAnimation"
        play={true}
        cancelOnInteraction={false}
        interval={5000}
        cssModule={style}
      >
        {images.map((image) => (
          <div key={image} data-src={image} />
        ))}
      </AutoplaySlider>
    </div>
  )
}
export default ImageSlider

[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>