Put svg inside splide__list

[DenisFranchi1974]

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

V 4.1.4

Description

I created a carousel, I would like to insert svg icons inside, the problem is that they are not displayed. Do you have a solution?

Reproduction Link

No response

Steps to Reproduce

Insert an svg icon inside the "splide__list" class.

Expected Behaviour

It should display

[bes-internal]

Inide splide__list should be splide__slide and inside you can insert svg. Make an example and show us.

[DenisFranchi1974]

Hi, Thanks for the reply. Here is an example:

<div class="splide" data-interval="" data-splide="">
    <div class="splide__track">
        <ul class="splide__list">
            <li class ="splide__slide">
            <div class="splide__slide__container">
               <svg>It does not appear!</svg>
            </div>
            </li>
        </ul>
    </div>
</div>

[bes-internal]

data-splide is json string and minimal valid is [] or {}

<div class="splide" data-interval="" data-splide="{}">
    <div class="splide__track">
        <ul class="splide__list">
            <li class ="splide__slide">
            111
			<svg xmlns="http://www.w3.org/2000/svg" width="25" height="32" viewBox="0 0 25 32"><path d="M25 24.7q0 2.1-1.4 3.5t-3.4 1.4q-2.4 0-4.2-1.7l-14-14q-2-2-2-4.7 0-2.9 2-4.8t4.8-2q2.9 0 5 2l10.7 10.8.2.4q0 .3-.6.8t-.8.6l-.4-.2L10.1 6Q8.7 4.6 6.8 4.6 5 4.6 3.6 5.9T2.4 9.2q0 1.8 1.3 3.2l13.9 13.8q1 1.2 2.6 1.2 1.1 0 1.8-.8t.8-1.9q0-1.4-1.1-2.6L11.3 11.8q-.5-.5-1-.5-.6 0-1 .4t-.3.8q0 .6.5 1.1l7.3 7.3.2.4q0 .3-.6.8t-.8.6l-.4-.2-7.3-7.3q-1.1-1-1.1-2.7 0-1.4 1-2.5t2.4-1q1.6 0 2.7 1.1l10.4 10.4q1.8 1.8 1.8 4.2z"/></svg>

            </li>
            <li class ="splide__slide">
            222
			<svg xmlns="http://www.w3.org/2000/svg" width="25" height="32" viewBox="0 0 25 32"><path d="M25 24.7q0 2.1-1.4 3.5t-3.4 1.4q-2.4 0-4.2-1.7l-14-14q-2-2-2-4.7 0-2.9 2-4.8t4.8-2q2.9 0 5 2l10.7 10.8.2.4q0 .3-.6.8t-.8.6l-.4-.2L10.1 6Q8.7 4.6 6.8 4.6 5 4.6 3.6 5.9T2.4 9.2q0 1.8 1.3 3.2l13.9 13.8q1 1.2 2.6 1.2 1.1 0 1.8-.8t.8-1.9q0-1.4-1.1-2.6L11.3 11.8q-.5-.5-1-.5-.6 0-1 .4t-.3.8q0 .6.5 1.1l7.3 7.3.2.4q0 .3-.6.8t-.8.6l-.4-.2-7.3-7.3q-1.1-1-1.1-2.7 0-1.4 1-2.5t2.4-1q1.6 0 2.7 1.1l10.4 10.4q1.8 1.8 1.8 4.2z"/></svg>
            </li>
        </ul>
    </div>
</div>

https://jsfiddle.net/2t790bLz/

[DenisFranchi1974]

Hi, Thank you very much! I put the code in one block and it works. The problem is when I add a child block inside the "ul" it doesn't work. I created a Gutenberg block with React, and everything works fine, inside it I can load images, text, icons, etc... but when I try to load svg they don't appear.... It certainly conflicts with Gutenberg. I'll re-test and let you know. Thanks for your help at the moment.