I'm using Glide.js and I have 3 slides per view. When I'm on the last index and should be seeing the first and the second index, the images of the first and second won't load until I click. So I'm standing on the first index, but then the last index won't load. Since I'm standing on position 0,1 I'm assuming the position of the last - in this case 8 - won't load.

Here's my code:

<ul className={styles.list}>
  <Carousel onMoveAfter={() => setActive()} settings={sliderSettings}bullets={false}>
            {list.map(item => <Item key={item.Id} list={item} />)}
   </Carousel>
 </ul>

export default ({list}) => {
  return (
    <li className={style.item}>
    <div className={style.imgContainer}>
      <a href={url}>
        <img className={style.Image} src={url} />
      </a>
    </div>
    <div className={style.contentContainer}>
      <a href={url}>
        <h4 className={style.Name}>{name}</h4>
      </a>
    </div>
    </li>
  );
};