feat: add slider on gallery images

[girishpanchal30]

Summary

Add the vertical slider on a desktop and the horizontal slider on a mobile device to the gallery image of a single product.

Will affect the visual aspect of the product

YES

Screenshots

Desktop View:

Mobile View:

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes https://github.com/Codeinwp/neve-pro-addon/issues/2508

[pirate-bot]

Plugin build for 5fbedfe is ready 🛎️!

• Download build

[poonam279]

@girishpanchal30, Could we remove the text like “Slide 1 of 6” that appears in the mobile view?

[poonam279]

@vytisbulkevicius, are we going to provide this feature in Neve free theme? I noticed that the gallery layout and gallery slider options are already available through the Sparks plugin.

@girishpanchal30, When the Sparks plugin is active, there are a few conflicts:

1. The arrows are not centered properly.

2. Enabling the Gallery Thumbnails Slider option in Sparks overrides the default feature we implemented in this PR.

3. If we do not enable the Gallery Thumbnails Slider option in Sparks and select the Left Grid Layout, then the gallery layout breaks on mobile.

[vytisbulkevicius]

@poonam279 yes, this should be available in Free. It's fine to still have the option in Sparks to control it, I forgot about this as well actually but I don't see a problem having it in Sparks with control.

[Soare-Robert-Daniel]

Here we have a little bit of problem. We need to find some creative solution in the written JS to make sure we get smallest size.

You can check with AI some variations of the code that can produce a smaller code when minified.

[girishpanchal30]

@Soare-Robert-Daniel I have updated the code to reduce the file size with the latest commit. Please check it and let me know if any changes are needed.

[girishpanchal30]

@poonam279 I have fixed the conflicts when the Sparks for WooCommerce plugin is active.

[Soare-Robert-Daniel]

Here is an interesting discussion.

Using jQuery allowed us to reduce the size of the script, but we introduced a new dependancie that needs to be loaded in the page, so the total size will be this script + jQuery script size.

But jQuery is also loaded by WooCommerce, thus we can ignore its script size since it will be always present.

@HardeepAsrani, what do you think?

[HardeepAsrani]

Sorry, I missed this, but yea, I agreed if Woo loads JS so it's not an issue for us to use as well.

[poonam279]

@girishpanchal30, there is still an issue when we do not enable the Gallery Thumbnails Slider option in Sparks and select the Left Grid Layout, then the gallery layout breaks on mobile.

[girishpanchal30]

@poonam279 I have fixed it with the latest commit. Please check and let me know if any changes are needed.

[poonam279]

@girishpanchal30, I have noticed several issues with this commit.

1. When we do not enable the Gallery Thumbnails Slider option in Sparks and select the Left Layout:
   The mobile layout appears like this

The desktop view doesn't have the arrows at the correct place. Also, it shouldn't show the slider as the slider option is not enabled in the Spark

2. When we enable the Gallery Thumbnails Slider option in Sparks and select the Normal Grid Layout:
   The desktop layout appears like this

3. Also, the slider doesn’t appear on the first load (without Sparks). It only shows up after reloading the page. Here’s a screencast for reference: https://vertis.d.pr/i/3xLDHa

This is the test instance where you can check the issues:
Admin area URL: https://chewturn.s2-tastewp.com/wp-admin
Username: poonam
Password: jgVhT4V7Khc

[girishpanchal30]

@poonam279, I have fixed all the mentioned issues with the latest commit.

[poonam279]

@girishpanchal30, The latest commit fixed previous issues but there are some new issues.

The slider still works even when the Gallery Thumbnails Slider option is disabled in Sparks and Normal Grid Layout is selected. Also, the horizontal layout appears on desktop:

When we enable the Gallery Thumbnails Slider option in Sparks and select the Normal Grid Layout, the gallery doesn't appear on desktop and mobile.

[girishpanchal30]

@poonam279 I have fixed it with the latest commit.

[poonam279]

Thank you @girishpanchal30, this commit fixed many issues but one is still there.

If you have the Sparks plugin active and the default Normal layout selected, the Horizontal layout still appears on desktop. On mobile, it works as expected.

[girishpanchal30]

@poonam279 I have fixed it with the latest commit. Please check and let me know if any changes are needed.

[pirate-bot]

🎉 This PR is included in version 4.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀