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. Addons
  3. Carousel plugin: links + previous/next buttons

Carousel plugin: links + previous/next buttons

Scheduled Pinned Locked Moved Addons
9 Posts 3 Posters 516 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
    cclarijs
    wrote on last edited by cclarijs
    #1

    Dear Laytheme forum,

    My question is the following, tl;dr: How can I make a carousel that uses both links and previous/next buttons?

    I am working on my portfolio site and have an "simple" issue with the Carousel plugin.

    At the top of my homepage I have a carousel with the project thumbnail image of each project. It works and links to the projects, but I cannot use the previous/next buttons. (I assume they are overwritten by the link pointer cursor)

    As a test I made a carousel with images that don't have links and then the previous/next buttons works just fine.

    On my previous website (without LayTheme) I had a carousel that worked with a central button for the link (50% width) and two previous/next buttons on the left/right (25% width each). I want to make something similar. Do I need to use custom css to achieve it?

    A screenshot of my website can be found below. The url is: www.christopheclarijs.be, I can deactivate the 'under construction' page if necessary.!

    Screen Shot 2020-11-10 at 18.03.09.png Screen Shot 2020-11-10 at 18.02.43.png

    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by Richard
      #2

      Dear @cclarijs

      When re-creating your problem - Carousel with Project Thumbnails and Prev/Next links I am able to have both:

      Screen Shot 2020-11-12 at 12.49.10 PM.png

      Are all the necessary settings checked in 'Lay Options' and 'Carousel Addon' Options such as show prev/next buttons? :

      Screen Shot 2020-11-12 at 12.46.45 PM.png

      If for some reason not (which is strange..) we can luckily force the Next and Prev buttons by adding some code to your Gridder - " +More - HTML "

      Screen Shot 2020-09-14 at 2.50.29 PM.png

      <a class="layprevproject" href="">prev</a>
      
      <a class="laynextproject" href="">next</a>
      

      When we add a link with the class "layprevproject" or "laynextproject" the link automatically receives the needed info to get you the next or prev project! :)

      So we can add those to the left and right of the gridder where you wish and then we can style them with CSS within "Lay Options - Custom CSS & HTML"

      Screen Shot 2020-09-14 at 2.51.54 PM.png

      Adding some code similar to this, font size changes and pushing it off the browser edge a little bit, but you can add as you wish to suit your needs:

      a.layprevproject {
          font-size:1.5em;
          padding-left:30px;
      }
      

      Also check out this documentation on the Lay Theme site:
      https://laytheme.com/documentation.html#custom-css-styling

      I hope this helps, best of luck and have a wonderful day

      Richard

      1 Reply Last reply
      0
      • C Offline
        C Offline
        cclarijs
        wrote on last edited by
        #3

        Dear Keith,

        Thank you for the quick and detailed reply. I think I formulated my question the wrong way, because I mean to add previous/next function as cursors.

        The following option on the Carousel addon:
        Screen Shot 2020-11-13 at 13.40.30.png

        Is it possible to have both a link to the project connected to the image and have prev/next cursors to navigate the carousel?

        But I think I can style the Next / Prev buttons in css as you suggested to do something similar.

        Best,
        Christophe

        1 Reply Last reply
        0
        • C Offline
          C Offline
          cclarijs
          wrote on last edited by
          #4

          To be more complete, this is what my Gridder looks like for this page.

          Screen Shot 2020-11-13 at 13.54.13.png

          H 1 Reply Last reply
          0
          • RichardR Offline
            RichardR Offline
            Richard
            Global Moderator
            wrote on last edited by
            #5

            Ah @cclarijs

            I believe i understand now :)

            I think it would be best to set up the next / prev manually as you want and then use custom css to style how you wish, better to be in control :)

            Best
            Richard

            1 Reply Last reply
            0
            • C Offline
              C Offline
              cclarijs
              wrote on last edited by
              #6

              Thank you @Richard-Keith, one additional question:

              Is it possible to position the 'captions for slides' and 'numbers' on a % value instead of a pixel value?

              In the Carousel add on option there is only a field for pixels, but I'd like to use percentage to match my Gridder columns.

              Screen Shot 2020-11-24 at 23.43.38.png

              1 Reply Last reply
              0
              • RichardR Offline
                RichardR Offline
                Richard
                Global Moderator
                wrote on last edited by
                #7

                Dear Christophe @cclarijs

                From the options provided, no i believe but you could force it with some Custom CSS:

                For the captions - 'space bottom' change the px to % e.g 90%

                .lay-carousel-sink-parent .captions-wrap {
                    margin-top: 180px !important;
                }
                

                Then for the captions 'space-left' same changes needed:

                .single-caption {
                    padding-left: 180px !important;
                }
                

                NOTE: that this will apply to all carousels and captions across your website, you may wish to specify each carousel individually to be safe!

                Best wishes and have a wonderful day Christophe :)
                Richard

                1 Reply Last reply
                0
                • C cclarijs

                  To be more complete, this is what my Gridder looks like for this page.

                  Screen Shot 2020-11-13 at 13.54.13.png

                  H Offline
                  H Offline
                  HW
                  wrote on last edited by
                  #8

                  Dear cclarijs and Richard,
                  i am working on a similar problem. I just made a carousel with some images (100vh) and now I actually want to link the last image of the carousel with another page. But when I link the image in the carouseleditor, the back- and next-arrow-cursers disappear on this image. Instead there is just the handpointer(handcurser), which leads me to the linked page.
                  Did you find a solution to manage the use of both (a link to the page connected to the image and have prev/next cursors to navigate the carousel).
                  It would be great, if you could tell me how you managed this!!
                  A lot of success with your projects and all the best,
                  Hannah

                  1 Reply Last reply
                  0
                  • RichardR Offline
                    RichardR Offline
                    Richard
                    Global Moderator
                    wrote on last edited by Richard
                    #9

                    Dear @HW

                    I am able to have both, here are my Carousel settings the image at the end is a linked image:
                    Screen Shot 2020-12-08 at 6.01.06 PM.png

                    Just to be sure:

                    • Wordpress, Lay Theme & Laytheme's Addons are all up to date?

                    • Any Custom CSS or JS that may interfere is temporarily removed.

                    • And third-party plugins de-activated to see if this resolves the issue.

                    Also link to your website if that helps ,
                    Best wishes, good luck and best success with your projects too! :)

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