Lay Theme Forum

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

    Carousel prev/next buttons outside slide, different stylings?

    General Discussion
    2
    6
    64
    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.
    • C
      carouh last edited by

      I have several "standard" carousels on the website that feature only images. I would like to add an only text carousel now that has a different styling than the image carousels. I would like the prev/next buttons to be outside the slides, is it possible to add a class to the carousel to style it differently? and how would I move the buttons to the outside?

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

        Dear @carouh

        This should be possible with some Custom CSS :)

        Could you please send a link to your website with the example in question, this will help me give a more direct answer!

        Best wishes, thank you for using Lay Theme & have a wonderful day

        Richard

        1 Reply Last reply Reply Quote 0
        • C
          carouh last edited by

          this is the website

          On the front page, you can see the little news box with the next and prev buttons that should be outside of the slideshow.

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

            Dear @carouh

            Have given it a go,
            Its possible to target that carousel specifically, then move the Next/Prev button to the outside, however you cannot see them, and with z-index you cant bring them forward. The carousel sits in a line of slides, however you just see the center slide because 'overflow:hidden' removes the others from view:

            With overflow, you can see hiding slides in a link ready to be looked over:

            Screen Shot 2020-12-08 at 5.39.49 PM.png

            Then with Overflow removed:

            Screen Shot 2020-12-08 at 5.40.19 PM.png

            So i have no trouble pushing the arrows, but if i push them outside the view box they get hidden because of the above situation, if you were to remove overflow:hidden it would defeat the purpose,

            You could do some good JQuery to force the <div> to the top but i am unable to go into that amount of detail at the moment sorry, unfortunately from the current options available its not possible,

            Selecting Pagination or the circles as the slider option may be a good go to find a compromise

            Sorry about this @carouh & best wishes, let me know how you go, or if you have any further questions :)

            Best
            Richard

            1 Reply Last reply Reply Quote 0
            • C
              carouh last edited by

              Hello Richard,
              thanks for your work. Is it possible to just have this one carousel with circles as the slider option?

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

                Not that i know of sorry @carouh

                Best
                Richard

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post

                Try this to fix issues 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

                I
                T
                M
                K
                C
                G

                Recent Topics

                • C

                  centred Carousel fixed width and proportions

                • text underline

                • open all links in a thumbnail grid in a new tab

                • lazy loading affects project thumbnail mouseover images

                laytheme.com