Can't wrap images in a tag

[morrow95]

trafficstars

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.1.3

Description

If you wrap your images in a tags then a lot of the features no longer work - such as 'gap and 'cover'. Here is an example structure that shows the issue :

html :

<section id="image-carousel" class="splide" aria-label="Beautiful Images">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<a class="test" href="#"><img src="image01.jpg" alt=""></a>
			</li>
		</ul>
  </div>
</section>

js :

var splide = new Splide( '#image-carousel', {
	type   : 'slide',
	pagination:false,
	height: 150,
	gap: '1rem',
	cover: true,
	perPage: 3,
}).mount();

In my specific case I need to wrap my images in a tags for use with another plugin for display, but I can think of tons of other reasons someone might want to do this.

My only guess here is somewhere in your code, maybe for these options specifically, it looks for img tags are direct children rather than being wrapped? It would seem an easy solution here would be to create a specific splide class for img tags.

Reproduction Link

No response

Steps to Reproduce

see above

Expected Behaviour

I expect everything should still work properly even if I wrap my img tags with a tags.