annamyers139 Posted May 22 Share Posted May 22 Hi hi everyone! I'm having a strange glitch with the gallery/reel function on my site -- I've got two galleries set to slideshow:reel on my homepage, one scrolls absolutely fine (top one) and the one just above doesn't move an inch. They're both logos, so ideally they'd both scroll on autoplay 😄 I tried moving the bottom one to the top and it works fine, but when I put it back underneath the other blue section, where it belongs, it goes back to not moving an inch. Strange! Do you guys know anything about this, is there somethign I can do?  https://www.annamyers.co.uk/ PW: sofia  CSS code that I've already got for this block (related to mobile height, shouldn't have anything to do with scrolling, but posting it anyway in case it's useful): /* - - Gallery Reel - - */ @media only screen and (max-width:767px) { .gallery-reel{ height:7vh!important } .gallery-reel-item{ height: inherit!important } } Link to comment
tuanphan Posted May 23 Share Posted May 23 I think you have some code to make Reel autoscroll in Code Injection > Header. Can you send it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
annamyers139 Posted May 23 Author Share Posted May 23 Oh, you're right, I didn't look there! Here it is:  <script>   /**   *  Gallery Section Auto Scroller   **/  (function () {   setAutoScroll({    gallery: 1,    direction: 2,    timing: 3000,   });       function setAutoScroll(settings) {    function init() {     let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];     function clickArrow() {      if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {       let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];       if (arrow) arrow.click();      }     }     window.setInterval(clickArrow, settings.timing);    }    window.addEventListener("DOMContentLoaded", init);   }  })(); </script>   Thanks so much for any help in advance, I appreciate it 🙂 Link to comment
Solution tuanphan Posted May 25 Solution Share Posted May 25 Try this new code instead <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ setInterval(function(){ $('.gallery-reel-control-btn[data-next]').click() },3000); }) </script>  Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
annamyers139 Posted May 26 Author Share Posted May 26 Thank you SO MUCH! This worked perfectly :))) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment