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. Scroll back to first element of a carousel

Scroll back to first element of a carousel

Scheduled Pinned Locked Moved Addons
13 Posts 3 Posters 487 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 arminunruh

    create a text element that says "go back"

    or sth

    then right click it and "set html class and id" set the class: carouselbutton

    then in lay options → custom head content:

    <script>
    	jQuery(document).on("click", ".carouselbutton", function(e){
    		e.preventDefault();
    		e.stopPropagation();
    		var $carousel = jQuery(".lay-carousel-wrap").first();
    		if( $carousel.length > 0 ) {
    			var mySwiper = $carousel.data('myswiper');
    			// index, speed
    			mySwiper.slideTo(0, 300);
    		}
    	})
    </script>
    

    does it worx?
    havent tried this code, should work i think

    C Offline
    C Offline
    carla
    wrote on last edited by
    #4

    @arminunruh
    Hello Armin
    Thank you very much for your help. It works, but there is still one thing that is not quite round yet. For example, when I am at image 10 and press the button, it goes back to position 0 and does an extra round right away. That wouldn't be too tragic, but it would be great to see the images during that. It would be nice if it looked like you were scrolling back yourself. Can you help me with this?

    1 Reply Last reply
    0
    • arminunruhA arminunruh

      lmk when u release the website its prtty cool i want to add it to laytheme.com

      C Offline
      C Offline
      carla
      wrote on last edited by
      #5

      @arminunruh
      and yes, I'll be sure to let you know. I'm happy, you like the site :-)

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

        and does an extra round right away.

        what do u mean i dont understand the sentence

        // index, speed
        mySwiper.slideTo(0, 300);

        300 is the speed which it takes to go to the first slide, maybe u can increase it to like 1000

        C 1 Reply Last reply
        0
        • arminunruhA arminunruh

          and does an extra round right away.

          what do u mean i dont understand the sentence

          // index, speed
          mySwiper.slideTo(0, 300);

          300 is the speed which it takes to go to the first slide, maybe u can increase it to like 1000

          C Offline
          C Offline
          carla
          wrote on last edited by
          #7

          @arminunruh

          I've formulated it a bit complicated. Here is a new attempt: At the moment the carousel rotates forward until it is back at 0. The first and the last frames are visible, in between I see the yellow background.

          Is it possible to reverse the direction, so it looks like rewinding / fast scrolling back? And, is it possible that the images in between are also displayed?

          Thanks for your help.

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

            no sorry not possible :/

            C 2 Replies Last reply
            0
            • arminunruhA arminunruh

              no sorry not possible :/

              C Offline
              C Offline
              carla
              wrote on last edited by
              #9
              This post is deleted!
              1 Reply Last reply
              0
              • arminunruhA arminunruh

                no sorry not possible :/

                C Offline
                C Offline
                carla
                wrote on last edited by
                #10

                @arminunruh

                No problem.. A friend was able to help me, now everything works as desired. Thanks anyway for your support. And by the way: The website is now online: www.lucaschenardi.ch

                One more question: you asked via Instagram a few months ago what could be useful features. I often wished I could "lock" elements / text frames as an administrator, so they can't be moved by the editors.... maybe this is possible in the future :-)

                Best regards, Carla

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

                  thanks

                  ok!
                  very nice website congratz

                  1 Reply Last reply
                  0
                  • C carla

                    @arminunruh

                    No problem.. A friend was able to help me, now everything works as desired. Thanks anyway for your support. And by the way: The website is now online: www.lucaschenardi.ch

                    One more question: you asked via Instagram a few months ago what could be useful features. I often wished I could "lock" elements / text frames as an administrator, so they can't be moved by the editors.... maybe this is possible in the future :-)

                    Best regards, Carla

                    A Offline
                    A Offline
                    Alex F
                    wrote on last edited by
                    #12

                    @carla Hi Carla, your created Website is very inspiring. Thank you for sharing your work. Just one question: how did your friend solve the problem you issued with your button?

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

                      here are all of the swiper methods:

                      https://swiperjs.com/swiper-api

                      you can just look at the code of his website, he used this js

                      <script>
                      	jQuery(document).on("click", ".carouselbutton", function(e){
                      		e.preventDefault();
                      		e.stopPropagation();
                      		var $carousel = jQuery(".lay-carousel-wrap").first();
                      		if( $carousel.length > 0 ) {
                      			var mySwiper = $carousel.data('myswiper');
                      			// index, speed
                      			
                      			var currentIndex = mySwiper.activeIndex - mySwiper.loopedSlides;
                      			
                      			var goToStart = 0;
                      			
                      			if(currentIndex > mySwiper.loopedSlides / 2) {
                          			goToStart = mySwiper.loopedSlides;
                      			}
                      			
                      			mySwiper.slideToLoop(goToStart, 2000, 'easeInOutExpo');
                      
                      
                      		}
                      	});
                      </script>
                      
                      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