SVG mouse cursor for the carousel

---

Hi,
is there a way to insert a SVG file as a custom cursor in my carousel? I tried to upload this path, but the browser does not display it.

Page→ link text
Path→ link text

Cheers
Marcol

Hmmm…

While checking the dev-console on your site there doesn’t seem to be a ressource realted to the cursor that’s not loading. I tried the same on another page a while ago and came to the conclusion that SVGs don’t work that well with the carousel.

I tried your specific SVG on a test page and couldn’t get it to work. Even when I rescaled it to be exactly 128×128px.

Even though it may not be the best resolution → Did you try using a PNG instead?

Hi edgrbnz,

with png files there are no loading problems, (I have already tried) but my client is not very satisfied, he asked me to implement a vector svg file for the cursor

🤔I understand…

The carousel plugin seems to not accept SVGs as images – which looks like a simple issue to me that might be fixable via an update (am I right @mariusjopen, @arminunruh?).

So long you could also try to overwrite the cursors via custom CSS and embed the SVGs you’d like to use there. Or try to paste the SVG’s path directly into custom CSS.

It might work with something along these lines:

/*replace lorem with the paths to your svgs!*/

.lay-carousel.cursor-right {
  cursor: url("lorem") !important; 
  }

.lay-carousel.cursor-left {
  cursor: url("lorem") !important;
  }

PS:
It looks to me you have fixed it by now with a different SVG, right?

Dear @Marcol
yes @edgrbnz you are right. It does not support SVG images.

The best is to have a quick look here:
https://flickity.metafizzy.co/

This is the carousel we use.
You can add a SVG path though.

I will check with Armin about that.

Best!

Marius

Yes @edgrbnz, i tried with a simpler arrow cursor. I'll try the custom css you recommended.

Many thanks

Cool! Hope it will work!

@mariusjopen Many thanks :)

@edgrbnz Your code works fine on chrome! Thank you so much again!

You’re more than welcome!
Glad it works.
Let’s mark this solved.

Is it possible to use an svg path simply through the CSS or will the SVG still need to be uploaded as an image?

Good question!

Did you try the code above 👆with something along the lines of this. Although I don’t think you need the cached feature for this it’s worth a try to find out if inline SVGs work.

Let us know if it works.

Cheers!

Dear @12b
I think in laytheme it needs to exist as image otherwise you cannot treat it like an image.

But as CUSTOM HTML element you can sue SCH Code as well.

Best!

Marius