Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Carousel prev/next buttons outside slide, different stylings?

Carousel prev/next buttons outside slide, different stylings?

Scheduled Pinned Locked Moved General Discussion
6 Posts 2 Posters 375 Views
  • 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 Offline
    C Offline
    carouh
    wrote on last edited by
    #1

    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
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      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
      0
      • C Offline
        C Offline
        carouh
        wrote on last edited by
        #3

        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
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • C Offline
            C Offline
            carouh
            wrote on last edited by
            #5

            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
            0
            • RichardR Offline
              RichardR Offline
              Richard
              Global Moderator
              wrote on last edited by
              #6

              Not that i know of sorry @carouh

              Best
              Richard

              1 Reply Last reply
              0
              Reply
              • Reply as topic
              Log in to reply
              • Oldest to Newest
              • Newest to Oldest
              • Most Votes


              I also code custom websites or custom Lay features.
              šŸ’æ Email me here: šŸ’æ
              info@laytheme.com

              Before you post:
              1. When using a WordPress Cache plugin, disable it or clear your cache.
              2. Update Lay Theme and all Lay Theme Addons
              3. Disable all Plugins
              4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

              This often solves issues you might run into

              When you post:
              1. Post a link to where the problem is
              2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
              3. If the problem is difficult to explain, post screenshots / link to a video to explain it
              Online Users
              S
              spale176
              E
              ersc_
              Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
              laytheme.com
              • Login

              • Don't have an account? Register

              • Login or register to search.
              • First post
                Last post
              0
              • Recent
              • Tags
              • Popular
              • Users
              • Search