Jump to content

How can I Make a carousel rewind faster, but only outside of edit mode?

Recommended Posts

Posted

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?

  • Replies 1
  • Views 242
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.