Jump to content

sophietnc

Member
  • Posts

    3
  • Joined

  • Last visited

Everything posted by sophietnc

  1. Hey, I have implemented a carousel and wanted to make it automatically slide. That succeeded thanks to the help of this thread: I found this thread which helped (the 'but' will follow soon): and used this piece of javascript in the header code injection <script> window.onload = function() { var nextArrow = document.querySelector(".summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 3000); }; </script> My next issue was that I wanted to control the time that it takes to rewind the carousel. I did this by changing the code to this: window.onload = function() { let nextArrow = document.querySelector(".summary-carousel-pager-next"); let prevArrow = document.querySelector(".summary-carousel-pager-prev"); let clickCount; function clickNext() { nextArrow.click(); clickCount++; }; function goBack(){ clickCount = 0; prevArrow.click(); prevArrow.click(); }; function clickHandler(){ console.log(clickCount); if(clickCount <= 2){ clickNext(); }else{ goBack(); } }; setInterval(clickHandler, 3000); }; The problem is that this works, but it forces the page to go into edit mode somehow. By reading some more threads I came to the conclusion that I would have to have this code only execute outside of edit mode. I found this thread: The problem now is that I have no idea how to make this work with code injection. Where should I place these lines? Is the code I'm using a proper way of handling this in the first place?
  2. I tried to implement this in my own header code injection, but is does not seem to work. Where should I exactly place this line of code? This is the code i want to run outside of edit mode only: <script> window.onload = function() { var nextArrow = document.querySelector(".summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 3000); }; </script> My next issue was that I wanted to control the time that it takes to rewind the carousel. I did this by changing the code to this: window.onload = function() { let nextArrow = document.querySelector(".summary-carousel-pager-next"); let prevArrow = document.querySelector(".summary-carousel-pager-prev"); let clickCount; function clickNext() { nextArrow.click(); clickCount++; }; function goBack(){ clickCount = 0; prevArrow.click(); prevArrow.click(); }; function clickHandler(){ console.log(clickCount); if(clickCount <= 2){ clickNext(); }else{ goBack(); } }; setInterval(clickHandler, 3000); };
  3. Hey, I have implemented a carousel and wanted to make it automatically slide. That succeeded thanks to the help of this thread: I found this thread which helped (the 'but' will follow soon): and used this piece of javascript in the header code injection <script> window.onload = function() { var nextArrow = document.querySelector(".summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 3000); }; </script> My next issue was that I wanted to control the time that it takes to rewind the carousel. I did this by changing the code to this: window.onload = function() { let nextArrow = document.querySelector(".summary-carousel-pager-next"); let prevArrow = document.querySelector(".summary-carousel-pager-prev"); let clickCount; function clickNext() { nextArrow.click(); clickCount++; }; function goBack(){ clickCount = 0; prevArrow.click(); prevArrow.click(); }; function clickHandler(){ console.log(clickCount); if(clickCount <= 2){ clickNext(); }else{ goBack(); } }; setInterval(clickHandler, 3000); }; The problem is that this works, but it forces the page to go into edit mode somehow. By reading some more threads I came to the conclusion that I would have to have this code only execute outside of edit mode. I found this thread: The problem now is that I have no idea how to make this work with code injection. Where should I place these lines? Is the code I'm using a proper way of handling this in the first place?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.