Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    SVG mouse cursor for the carousel

    Addons
    4
    13
    705
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      Marcol last edited by Marcol

      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

      1 Reply Last reply Reply Quote 0
      • edgrbnz
        edgrbnz last edited by edgrbnz

        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?

        ✦ ✦ ✦

        1 Reply Last reply Reply Quote 0
        • M
          Marcol last edited by

          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

          1 Reply Last reply Reply Quote 0
          • edgrbnz
            edgrbnz last edited by edgrbnz

            🤔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?

            ✦ ✦ ✦

            M 1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              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

              www.mariusjopen.world

              M 1 Reply Last reply Reply Quote 0
              • M
                Marcol last edited by

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

                Many thanks

                1 Reply Last reply Reply Quote 1
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Cool! Hope it will work!

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • M
                    Marcol @mariusjopen last edited by

                    @mariusjopen Many thanks :)

                    1 Reply Last reply Reply Quote 0
                    • M
                      Marcol @edgrbnz last edited by

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

                      1 Reply Last reply Reply Quote 1
                      • edgrbnz
                        edgrbnz last edited by edgrbnz

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

                        ✦ ✦ ✦

                        1 Reply Last reply Reply Quote 0
                        • 12b
                          12b last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • edgrbnz
                            edgrbnz last edited by

                            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!

                            ✦ ✦ ✦

                            1 Reply Last reply Reply Quote 0
                            • mariusjopen
                              mariusjopen Global Moderator last edited by

                              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

                              www.mariusjopen.world

                              1 Reply Last reply Reply Quote 0
                              • First post
                                Last post
                              Post a link to where the problem is
                              I don't answer or check forum DMs, please just post on the forum.
                              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                              Before you post:

                              Use the Search Feature. Maybe there is already a solution to your issue.

                              1. Update Lay Theme and all Lay Theme Addons
                              2. Disable all Plugins
                              3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                              4. Now see if your problem solved itself
                              5. Go here, see if your problem is listed here:
                              Troubleshooting

                              When you post:
                              1. Post a link to where the problem is
                              2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                              Thanks!

                              Online Users

                              V
                              J
                              G
                              E
                              K

                              Recent Topics

                              • T

                                scroll element transitions mobile

                              • L

                                HTML

                              • M

                                Burger menu in desktop and tablet view

                              • M

                                WPForms Lite not working with new theme update (5.5.5)

                              laytheme.com