Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Enable Hash Navigation on carousel

    Addons
    2
    3
    26
    Loading More Posts
    • 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.
    • S
      SteveWTD last edited by

      Looking at the docs for swiperjs
      https://swiperjs.com/demos/#hash_navigation
      if I want to navigate with the url hash feature
      I need to add these parameters to the swiper

      hashNavigation: {
              watchState: true,
            },
      

      there is reference in the api to add parameters after the swiper is initialised but I can't work this out my coding skills are not advanced eg

      var mySwiper = document.querySelector('.swiper-container').swiper
      
      // Now you can use all slider methods like
      mySwiper.slideNext();
      

      is this how it would be done Ive tested this above and it does not work? any help or pointers would be apreciated.
      Does the mySwiper variable have to be the same name as lay themes carousel variable if so what is it by default - layCarousel?

      Thanks

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        hey @SteveWTD
        sorry this won't work and i think i won't include this functionality in lay theme

        if you just want to slide to the next image, maybe

        window.laytheme.on('newpageshown', function(){
        
        var mySwiper = document.querySelector('.swiper-container').swiper;
        
        // Now you can use all slider methods like
        mySwiper.slideNext();
        
        });
        

        but there might be multiple carousels on your page, best to use a class or id and target the specific carousel

        right click the carousel and do "set element class and id"

        you need to know some html and javascript to make sense of all of this and I can't guarantee you can make this work

        good luck

        1 Reply Last reply Reply Quote 0
        • S
          SteveWTD last edited by

          Thanks Arminunruh
          so if I use the following

          <script>
          jQuery(document).on("click", ".id-28 .element-collection .element-wrap", function(event) {
          	
          	var slideno = jQuery(this).find("img").attr("alt");
                    window.location.href = '/portfolio#' + slideno;
          });
          var urlhash = window.location.hash.substr(1);
          
          
          window.laytheme.on('newpageshown', function(){
          
          var mySwiper = document.querySelector('.swiper-container').swiper;
          
          // Now you can use all slider methods like
          mySwiper.slideTo(urlhash, 1, false);
          
          });
          </script>
          

          no matter what slider method I use I get error like "TypeError: undefined is not an object (evaluating 'mySwiper.slideTo')" this suggest a timing issue as the object is not there can you see where I am going wrong.
          Thanks for your help.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post

          Before you post

          Use the Search Feature. Maybe there is already a solution to your issue.

          1. Update Lay Theme and all Lay Theme Addons
          2. Disable all Plugins
          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
          4. Now see if your problem solved itself
          5. Go here, see if your problem is listed here:
          Troubleshooting

          When you post:
          1. Post a link to where the problem is
          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

          Thanks!

          Online Users

          Recent Topics

          • N

            website blank.

          • S

            Theme crashed - because of Polylang?

          • S

            New fade-in / opacity bug?

          • A

            Unable to update lay theme / to login wp admin

          laytheme.com