slideshow not auto playing when cursor is in slideshow banner

[niceeee]

URL: testing (makerlab-electronics-ph.myshopify.com)

[okur90]

Hi @niceeee 

You will need to modify the slideshow's JavaScript code in your Shopify theme.

It might be named "theme.js", "slideshow.js", or something similar. Locate the slideshow initialization code. It should look something like this:

```javascript
$('.slideshow').slick({
  // options...
});

Add the `pauseOnHover: false` option to the slideshow settings.

$('.slideshow').slick({
  // other options...
  pauseOnHover: false,
});

Now, the slideshow should continue to auto-play even when the cursor is within the slideshow banner.

[niceeee]

can't find the theme.js and slidershow.js, im using dawn theme

[okur90]

Can you look for the main.js and search for the following code:

this.sliderElement.flickity({
  // options...
});

Add the `pauseOnHover: false` option to the Flickity settings.

this.sliderElement.flickity({
  // other options...
  pauseOnHover: false,
});

[niceeee]

there is no main.js in my theme

[okur90]

@niceeee Instead of making me guess the names of each JavaScript file 🙂 could you please inform me of the specific JavaScript files present in your theme?

[niceeee]

theme.liquid, base.css, slideshow.liquid and component-slideshow.css

[okur90]

If you need assistance in finding the JavaScript code responsible for the slideshow functionality, please share more details about the JavaScript files and any related code present in your theme. With more information, I can better guide you in locating and modifying the relevant code.

[niceeee]

there is no javascript code in my theme cause its a dawn theme. it is full of .liquid files

[okur90]

There is JavaScript code embedded within your Liquid template files.

Can you send the liquid code via DM?

[Alok_Kasgar · Accepted solution]

@niceeee there is a file global.js, you will find slider code in this file

try comment or delete these 4 lines and check slide. 

this.addEventListener('mouseover', this.focusInHandling.bind(this));
    this.addEventListener('mouseleave', this.focusOutHandling.bind(this));
    this.addEventListener('focusin', this.focusInHandling.bind(this));
    this.addEventListener('focusout', this.focusOutHandling.bind(this));

[Rudra_95]

I have the same problem but I can't find any "slideshow" related lines in the "globle.js" file. :c

I am using the latest Dawn 13.0.1 version.

Please help me out with this, Thanks