Solved

slideshow not auto playing when cursor is in slideshow banner

niceeee
Shopify Partner
298 4 22
Accepted Solution (1)

Alok_Kasgar
Shopify Partner
112 26 26

This is an 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));

Alok_Kasgar1_0-1680338622373.png

 

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com

View solution in original post

Replies 11 (11)

okur90
Shopify Partner
126 20 18

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.

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au
niceeee
Shopify Partner
298 4 22

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

okur90
Shopify Partner
126 20 18

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,
});

 

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au
niceeee
Shopify Partner
298 4 22

there is no main.js in my theme

okur90
Shopify Partner
126 20 18

@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?

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au
niceeee
Shopify Partner
298 4 22

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

okur90
Shopify Partner
126 20 18

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.

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au
niceeee
Shopify Partner
298 4 22

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

okur90
Shopify Partner
126 20 18

There is JavaScript code embedded within your Liquid template files.

 

Can you send the liquid code via DM?

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au

Alok_Kasgar
Shopify Partner
112 26 26

This is an 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));

Alok_Kasgar1_0-1680338622373.png

 

Alok Kasgar
If helpful, please Like and Accept this Solution to help others too | Email: alokasgar@gmail.com
Rudra_95
Shopify Partner
2 0 0

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

Rudra_95_0-1711903707826.png

I am using the latest Dawn 13.0.1 version.

Please help me out with this, Thanks