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. Centre height aligned Carousel

Centre height aligned Carousel

Scheduled Pinned Locked Moved Addons
12 Posts 5 Posters 1.5k 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.
  • F Offline
    F Offline
    fraserclark
    wrote on Jul 27, 2016, 11:02 PM last edited by fraserclark Jul 27, 2016, 7:03 PM
    #1

    Hey Armin

    I want to create a carousel, which is always centre height and width aligned and fixed to the middle. Examples below. Is this possible with the carousel extension?

    http://guillaumechuard.com/
    http://jonathanhares.ch/

    Also, is it also possible to slow the speed of the fade? A reference here:

    http://laneandassociates.co/the-gourmand-issue-06

    Apologies if this has already been answered numerous times, I just couldn't find a recent and exact thread.

    Thanks as always
    Fraser

    1 Reply Last reply
    1
    • A Offline
      A Offline
      arminunruh
      Global Moderator
      wrote on Jul 28, 2016, 7:11 AM last edited by arminunruh Jul 28, 2016, 3:22 AM
      #2

      Hey Fraser!

      I want to create a carousel, which is always centre height and width aligned and fixed to the middle. Examples below. Is this possible with the carousel extension?

      Please take a look at that video:
      http://laytheme.com/documentation.html#use-browser-height-for-row-height

      In that video you can see how to make a row browser filling. Please make a row browser filling. If it's ur first row for example then it makes sense to set the "frame top" value to 0. (the pink bar at the top, just like u see in the video)

      Then you can put your carousel in there and align it to the middle by selecting it and clicking the "align middle" button in the gridder.

      One thing about the references here:
      http://guillaumechuard.com/
      http://jonathanhares.ch/

      On these websites when you resize the height of your browser the carousel will adapt and become smaller. Let me know if that's very important for you to have that feature. With lay theme your carousel size will only adapt when resizing the width of the browser at the moment.

      Also, is it also possible to slow the speed of the fade?

      Yes, please use this css in "lay options" -> "custom css & html" -> "custom css for desktop version"

      .lay-carousel.fadeSlider.fading .lay-carousel-slide.transition{
      transition: opacity 800ms ease-out;
      }
      

      The normal value is 400ms for the animation duration.

      1 Reply Last reply
      0
      • F Offline
        F Offline
        fraserclark
        wrote on Jul 28, 2016, 8:04 PM last edited by
        #3

        Hey Armin

        Thanks for such a speedy response! :+1: ) the fading works great.

        Ideally, I'd like the carousel to adapt and become smaller like those sites — is there a simple piece of html or css for this?

        Thanks for your help much appreciated!

        Fraser

        1 Reply Last reply
        0
        • A Offline
          A Offline
          arminunruh
          Global Moderator
          wrote on Aug 1, 2016, 11:11 AM last edited by
          #4

          hey!

          Ideally, I'd like the carousel to adapt and become smaller like those sites — is there a simple piece of html or css for this?

          No there isn't, it's something that I would need to code as an additional feature.

          E 1 Reply Last reply Jan 3, 2023, 5:15 PM
          0
          • S Offline
            S Offline
            strk
            wrote on Nov 21, 2016, 10:28 AM last edited by
            #5

            Hi @arminunruh ,

            how come even after making a row browser filling, setting the frame top to 0 and aligning the carousel to the middle it's not height centered?

            http://www.querida.si/test-videos-2

            Thanks in advance!

            1 Reply Last reply
            0
            • A Offline
              A Offline
              arminunruh
              Global Moderator
              wrote on Nov 21, 2016, 5:24 PM last edited by arminunruh Nov 21, 2016, 12:25 PM
              #6

              Hey strk!

              Oh, yea hmm could be a bug. What settings do you have here?

              "lay options" -> "carousel addon"

              Screen Shot 2016-11-21 at 18.23.28.png

              When I uncheck both I don't have extra space at the bottom. But of course if your captions are just empty or sth there shouldn't be extra space either. But what I find weird is that I see the "numbers" html markup but nothing in there.

              btw your website is pretty amazing :)

              1 Reply Last reply
              0
              • S Offline
                S Offline
                strk
                wrote on Nov 22, 2016, 2:07 PM last edited by
                #7

                You were right @arminunruh ! I had "show captions" activated but I wasn't using them.
                Btw thanks for your kind words! Your theme is pretty amazing too! :)

                1 Reply Last reply
                1
                • A arminunruh
                  Aug 1, 2016, 11:11 AM

                  hey!

                  Ideally, I'd like the carousel to adapt and become smaller like those sites — is there a simple piece of html or css for this?

                  No there isn't, it's something that I would need to code as an additional feature.

                  E Offline
                  E Offline
                  ErEs
                  wrote on Jan 3, 2023, 5:15 PM last edited by
                  #8

                  @arminunruh is there any chance this will be implemented in the future? personally i think it would be really useful in many cases :)

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    arminunruh
                    Global Moderator
                    wrote on Jan 10, 2023, 8:19 PM last edited by
                    #9

                    what exactly?

                    so if you want to have a carousel that adapts its height like here:

                    https://www.jonathanhares.ch/

                    you can now set the carousel to "fixed height" when you edit the carousel

                    and use a value like 80vh or sth

                    or:

                    calc( 100vh - 100px )

                    L 1 Reply Last reply Feb 26, 2023, 9:49 AM
                    0
                    • A arminunruh
                      Jan 10, 2023, 8:19 PM

                      what exactly?

                      so if you want to have a carousel that adapts its height like here:

                      https://www.jonathanhares.ch/

                      you can now set the carousel to "fixed height" when you edit the carousel

                      and use a value like 80vh or sth

                      or:

                      calc( 100vh - 100px )

                      L Offline
                      L Offline
                      lortnok
                      wrote on Feb 26, 2023, 9:49 AM last edited by
                      #10

                      @arminunruh when setting fixed height of carousel to 70vh for example, the next / previous arrows are not aligned to the middle, can you fix this please?
                      333694736_1123725449025638_5089531995939511963_n.jpg

                      A 1 Reply Last reply Mar 2, 2023, 12:57 PM
                      0
                      • L lortnok
                        Feb 26, 2023, 9:49 AM

                        @arminunruh when setting fixed height of carousel to 70vh for example, the next / previous arrows are not aligned to the middle, can you fix this please?
                        333694736_1123725449025638_5089531995939511963_n.jpg

                        A Offline
                        A Offline
                        arminunruh
                        Global Moderator
                        wrote on Mar 2, 2023, 12:57 PM last edited by
                        #11

                        @lortnok Screenshot 2023-03-02 at 13.57.06.png

                        so i just created a 70vh height carousel and the prev/next arrows are center aligned.
                        do you have a link to where this happens? on your site i cant see the arrow buttons

                        L 1 Reply Last reply Mar 3, 2023, 11:41 AM
                        0
                        • arminunruhA arminunruh
                          Mar 2, 2023, 12:57 PM

                          @lortnok Screenshot 2023-03-02 at 13.57.06.png

                          so i just created a 70vh height carousel and the prev/next arrows are center aligned.
                          do you have a link to where this happens? on your site i cant see the arrow buttons

                          L Offline
                          L Offline
                          lortnok
                          wrote on Mar 3, 2023, 11:41 AM last edited by
                          #12

                          @arminunru Thanks for the quick reply!

                          https://56hrs.com/testpage/

                          The arrows are only visible on the mobile version. (Ios, safari)

                          Setting the aspect ratio according to the first picture is a workaround, sort of.

                          Currently I am using fade transition because I prefer that, but on mobile when it is set to fade it is not possible to swipe between the pictures :(, therefore I am forced to use slide transition on the mobile version.

                          It is definitely not end of the world but it is one more thing to remember, one more setting to tweak and I cannot just sync the carousal between mobile and web version.

                          I think swipe navigation option for a carousal is a must nowadays, do you think it could be implemented for the fade transition, too?

                          Thanks a lot for your hard work, really appreciated.

                          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