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. Multiple slides per view (Laytheme Carousel)

Multiple slides per view (Laytheme Carousel)

Scheduled Pinned Locked Moved Addons
19 Posts 10 Posters 4.4k 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.
  • arminunruhA Offline
    arminunruhA Offline
    arminunruh
    Global Moderator
    wrote on last edited by
    #2

    Hey wow, that's cool that you added this. Yeah I think it is nice, I'm writing it down. I also have to work on making the carousel work fullscreen.

    1 Reply Last reply
    0
    • W Offline
      W Offline
      wow123
      wrote on last edited by
      #3

      Hey Guys,

      I just bought the Carousel AddOn and am looking exactly for the multiple slides per view option.
      I cannot find the "multiple slides" check, like you, rsepierre, got it in your video. What do I have to adjust to get it?

      I'm happy for any help!
      Best,
      Andreas

      1 Reply Last reply
      0
      • arminunruhA Offline
        arminunruhA Offline
        arminunruh
        Global Moderator
        wrote on last edited by
        #4

        hey wow123, the multiple slides was coded by rsepierre, he modified the carousel addon.

        1 Reply Last reply
        0
        • R Offline
          R Offline
          rsepierre
          wrote on last edited by rsepierre
          #5

          I've reworked my code to make it "sort of update proof", this might interest you @wow123

          Now all you need to do to have this feature is to add this code to the "Custom HTML at bottom" option in Laytheme parameters

          0_1486826084720_upload-7e63ca5f-5b32-4ced-8f03-9ffeb7a8388e

          <script>
          (function() {
                  function layCarouselResize() {
                      layCarousel.sizeCarousels();
                      layCarousel.sizeCaptions();
                      layCarousel.repositionSliders();
                      jQuery(".lay-carousel:not(:hover)").flickity( 'next' );
                      console.log('custom autoplay');
                  }
                  setInterval( layCarouselResize, 4000 );
          
                  window.Frontend.GlobalEvents.on("projectpageshown", function(a) {
                      setTimeout(function() {
                          jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 });
                          /*jQuery('.lay-carousel').on( 'settle.flickity', function() {
                              console.log('slide-end callback');
                              // callback not working well
                              layCarouselResize():
                          });*/
                      }, 100)
                  });
                  layCarousel.playPauseHtml5Videos = function(a) {
                  var b = a.find(".lay-carousel-slide:not(.is-selected) video");
                  if (b.each(function() {
          //              this.pause();
          //              var a = jQuery(this.parentNode).find(".html5video-customplayicon");
          //              0 != a.length && a.show();
          //              var b = jQuery(this.parentNode).find(".html5-video-placeholder-image");
          //              0 != b.length && b.show()
                      }), !layCarousel.isTouchDevice) {
                      var c = a.find(".lay-carousel-slide video");
                      0 != c.length && c[0].play(), c.on("canplay", function() {
                          this.play(), c.off("canplay")
                          })
                      }
                  };
          })();
          </script>
          
          <style>
          .multiple-slides-view .lay-carousel-slide {
                width: auto !important;
          }
          .multiple-slides-view img.h100 , .multiple-slides-view .video-slide.h100 video {
              position: relative !important;
              -webkit-transform: none !important;
              transform: none !important;
              -ms-transform: none !important;
              left: 0 !important;
          }
          
          .multiple-slides-view .slide-inner a, .multiple-slides-view .slide-inner {
              width: auto !important;
              position: relative !important;
              height: 100% !important;
          }
          
          .multiple-slides-view .slide-inner {
              margin-right: 1vw;
          }
          </style>
          

          And then add "multiple-slides-view" class to the row in which you wan't that carrousel, like so :

          0_1486826188116_upload-3c53332f-3287-4fbe-b3b1-0b9aad309c69

          drawbacks :

          flickity used in layTheme is not compatible with "imageloaded", so my "hack" is to update the layout everytime change slide (every 4000ms in my case).

          And because the layCarouselResize() updates all carousels at once, i had to create my own autoplay so all carousels are synchronized.

          You should then make sure to :

          • disable autoplay on the "multiple-slides-view" sliders.
          • change the autoplaytime at the following line :
            setInterval( layCarouselResize, 4000 );
          • change the "transition duration" with friction and attraction custom options at the following line :
            jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 });
          M 1 Reply Last reply
          0
          • R rsepierre

            I've reworked my code to make it "sort of update proof", this might interest you @wow123

            Now all you need to do to have this feature is to add this code to the "Custom HTML at bottom" option in Laytheme parameters

            0_1486826084720_upload-7e63ca5f-5b32-4ced-8f03-9ffeb7a8388e

            <script>
            (function() {
                    function layCarouselResize() {
                        layCarousel.sizeCarousels();
                        layCarousel.sizeCaptions();
                        layCarousel.repositionSliders();
                        jQuery(".lay-carousel:not(:hover)").flickity( 'next' );
                        console.log('custom autoplay');
                    }
                    setInterval( layCarouselResize, 4000 );
            
                    window.Frontend.GlobalEvents.on("projectpageshown", function(a) {
                        setTimeout(function() {
                            jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 });
                            /*jQuery('.lay-carousel').on( 'settle.flickity', function() {
                                console.log('slide-end callback');
                                // callback not working well
                                layCarouselResize():
                            });*/
                        }, 100)
                    });
                    layCarousel.playPauseHtml5Videos = function(a) {
                    var b = a.find(".lay-carousel-slide:not(.is-selected) video");
                    if (b.each(function() {
            //              this.pause();
            //              var a = jQuery(this.parentNode).find(".html5video-customplayicon");
            //              0 != a.length && a.show();
            //              var b = jQuery(this.parentNode).find(".html5-video-placeholder-image");
            //              0 != b.length && b.show()
                        }), !layCarousel.isTouchDevice) {
                        var c = a.find(".lay-carousel-slide video");
                        0 != c.length && c[0].play(), c.on("canplay", function() {
                            this.play(), c.off("canplay")
                            })
                        }
                    };
            })();
            </script>
            
            <style>
            .multiple-slides-view .lay-carousel-slide {
                  width: auto !important;
            }
            .multiple-slides-view img.h100 , .multiple-slides-view .video-slide.h100 video {
                position: relative !important;
                -webkit-transform: none !important;
                transform: none !important;
                -ms-transform: none !important;
                left: 0 !important;
            }
            
            .multiple-slides-view .slide-inner a, .multiple-slides-view .slide-inner {
                width: auto !important;
                position: relative !important;
                height: 100% !important;
            }
            
            .multiple-slides-view .slide-inner {
                margin-right: 1vw;
            }
            </style>
            

            And then add "multiple-slides-view" class to the row in which you wan't that carrousel, like so :

            0_1486826188116_upload-3c53332f-3287-4fbe-b3b1-0b9aad309c69

            drawbacks :

            flickity used in layTheme is not compatible with "imageloaded", so my "hack" is to update the layout everytime change slide (every 4000ms in my case).

            And because the layCarouselResize() updates all carousels at once, i had to create my own autoplay so all carousels are synchronized.

            You should then make sure to :

            • disable autoplay on the "multiple-slides-view" sliders.
            • change the autoplaytime at the following line :
              setInterval( layCarouselResize, 4000 );
            • change the "transition duration" with friction and attraction custom options at the following line :
              jQuery('.lay-carousel').flickity({selectedAttraction: .005, friction: .2 });
            M Offline
            M Offline
            maximilianm
            wrote on last edited by
            #6

            @rsepierre
            Wow that's great! Thanks a lot for the code, works very smooth actually. I cropped all images in the slideshow with css to thumbnails with same height & width – now I'm wondering if it's possible to do the carousel without autoplay (like arrows or hover area on the left/right side) and combine it somehow with Lightbox.
            If lightbox plugin is activated for that page, why doesn't it open when clicking on the images in the carousel? does the lightbox ignore those in the carousel? Could it be that there's a workaround for this?

            1 Reply Last reply
            0
            • helenH Offline
              helenH Offline
              helen
              wrote on last edited by
              #7

              I was just randomly browsing the forum when I came upon this topic, which is exactly something I've been wishing for. I'd love to try the custom hack (although of course it would also be an amazing addition for a future carousel update, when and if you have time @arminunruh) but for some reason I can't get it to work. Copied in the @rsepierre's code in the right place, added the class to the right row, nothing. What could it be that I'm doing wrong? It has to be something since its working for @maximilianm, hmm...
              Thanks for the nifty trick in any case @rsepierre!

              M 1 Reply Last reply
              0
              • helenH helen

                I was just randomly browsing the forum when I came upon this topic, which is exactly something I've been wishing for. I'd love to try the custom hack (although of course it would also be an amazing addition for a future carousel update, when and if you have time @arminunruh) but for some reason I can't get it to work. Copied in the @rsepierre's code in the right place, added the class to the right row, nothing. What could it be that I'm doing wrong? It has to be something since its working for @maximilianm, hmm...
                Thanks for the nifty trick in any case @rsepierre!

                M Offline
                M Offline
                maximilianm
                wrote on last edited by
                #8

                @helen i added the class to the carousel itself, not the row (i think it was the row in rsepierre's example because there the carousel covers the whole row - maybe you try that. :)

                1 Reply Last reply
                0
                • helenH Offline
                  helenH Offline
                  helen
                  wrote on last edited by
                  #9

                  @maximilianm thank you for the quick reply! I tried that too earlier but to no avail... So confused :/

                  1 Reply Last reply
                  1
                  • C Offline
                    C Offline
                    curisu
                    wrote on last edited by curisu
                    #10

                    @arminunruh hi. is this still planned for an update in the near future? this and the ability to configure unique auto play speeds for each carousel would make the addon that much more powerful.

                    thanks and keep up the great work!

                    1 Reply Last reply
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #11

                      Hi Curisu!

                      We are currently working on the new version of Laytheme. It will be embedded in the future. but not sure when exactly.

                      Good energy!

                      Marius

                      www.mariusjopen.world

                      1 Reply Last reply
                      0
                      • D Offline
                        D Offline
                        david
                        wrote on last edited by
                        #12

                        Hi Lay team! I’m bumping this thread to ask if this has been implemented in any of the updates since this topic was posted? I’m looking to achieve the exact functionality. Thanks!

                        1 Reply Last reply
                        0
                        • mariusjopenM Offline
                          mariusjopenM Offline
                          mariusjopen
                          Global Moderator
                          wrote on last edited by
                          #13

                          Dear @david
                          no updates about the slider with the multiple images.

                          But we have Image-Thumbnail-Grid now.

                          Best!

                          Marius

                          www.mariusjopen.world

                          1 Reply Last reply
                          0
                          • V Offline
                            V Offline
                            valentingienger
                            wrote on last edited by
                            #14

                            Hi all,

                            could need some help. I followed all the steps by @rsepierre (thank you for that!!).
                            But something is still not right I guess. When landing on the page for the first time the pictures don't load completely. Here's an example:
                            0_1537386011095_Bildschirmfoto 2018-09-19 um 15.31.05.png
                            After refreshing the page it usually looks good. At least on Safari, not always on Firefox.

                            Any idea what I might have missed?

                            Happy for any help.
                            Cheers,
                            Valentin

                            PS. @arminunruh any news about an updated version including this feature?

                            1 Reply Last reply
                            0
                            • mariusjopenM Offline
                              mariusjopenM Offline
                              mariusjopen
                              Global Moderator
                              wrote on last edited by
                              #15

                              Dear @valentingienger
                              can you provide a link?

                              Best!

                              Marius

                              www.mariusjopen.world

                              V 1 Reply Last reply
                              0
                              • mariusjopenM mariusjopen

                                Dear @valentingienger
                                can you provide a link?

                                Best!

                                Marius

                                V Offline
                                V Offline
                                valentingienger
                                wrote on last edited by
                                #16

                                @mariusjopen
                                sure: http://www.valentingienger.com

                                1 Reply Last reply
                                0
                                • textcursorT Offline
                                  textcursorT Offline
                                  textcursor
                                  wrote on last edited by
                                  #17

                                  Ive just tried this and its not working, any ideas guys?

                                  1 Reply Last reply
                                  0
                                  • mariusjopenM Offline
                                    mariusjopenM Offline
                                    mariusjopen
                                    Global Moderator
                                    wrote on last edited by
                                    #18

                                    Dear @valentingienger
                                    on Chrome it works. but on Safari it is problematic.

                                    We will have a look.

                                    Best!

                                    Marius

                                    www.mariusjopen.world

                                    1 Reply Last reply
                                    0
                                    • arminunruhA Offline
                                      arminunruhA Offline
                                      arminunruh
                                      Global Moderator
                                      wrote on last edited by
                                      #19

                                      hey!
                                      hmm i should add this as a feature. hmm really busy with a few other things right now. might take a while!

                                      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