Return to previous page

Styling single product page: Product image slider

This topic has 6 replies, 3 voices, and was last updated 5 years ago ago by Rose Tyler

Hoa Kuhn Nguyen

Participant

November 11, 2019 at 17:14

Hello 8theme,

I’ve searched the web but can’t find any way to do so I decided to create a post here.
On the single product page, I want to change the animation of sliding between photos in the gallery (product image) into simple cross-fading. How to achieve that? I know a little of editing CSS/PHP file if you need me to do so.
(I did a screen recording to help you understand where I pointed to: https://youtu.be/5n2G9JOQt1A)

Many thanks!
Hoa.

Please, contact administrator
for this information.

#224854 Copied Theme version: 6.2 WooCommerce version: 3.8.0

5 Answers

John Holden

Support staff

November 12, 2019 at 07:06

Hi,

I can’t access your site, please check again http://prntscr.com/pvpths

Regards,
Hung PD

#224878 Copied

Hoa Kuhn Nguyen

Participant

November 12, 2019 at 07:51

Hi Hung The,

Sorry for my mistake, please retry again in this reply’s private content area.

Thanks!
Hoa.

Please contact administrator
for this information.

#224880 Copied
Rose Tyler

Support staff

November 12, 2019 at 09:25
Hello,

You can try the next way:
Install a child-theme (https://www.8theme.com/downloads/ http://prntscr.com/pvrejz), add the next code in functions.php of the child-theme:
```
function etheme_enqueue_scripts_custom() {
    wp_enqueue_script('etheme-child', get_stylesheet_directory_uri().'/js/custom.js',array(),false,true);
}
add_action( 'wp_enqueue_scripts', 'etheme_enqueue_scripts_custom');
```
then create js folder with custom.js file inside this theme, and add –
```
jQuery(document).ready(function($){
	$('.swiper-control-top').attr('data-effect', 'fade');
});
```
You will get – https://gyazo.com/115d769d25ed2fa0203c37c1108eba5d

If a parent theme is activated on your site right now, you need to export theme options in a file (go to Theme Options > Export/Import > click on Export button) and import this file after the child theme activating – http://prntscr.com/pvrgqj

Please note that additional customization in files is outside the scope of basic theme support.
If you need help with the additional customization, submit customization request to WPKraken team

Regards
#224893 Copied
Hoa Kuhn Nguyen

Participant

November 12, 2019 at 17:20

Hi Rose Tyler,

Many many thanks, this works like a charm!!!
Thanks for your enthusiastic help!

Warmest Regards,
Hoa.

#224913 Copied

Rose Tyler

Support staff

November 12, 2019 at 17:37

Hello,

Would you mind to rate our product:
https://prnt.sc/d256m6
https://themeforest.net/downloads
That would be much appreciated ?

Regards

#224915 Copied
Viewing 6 results - 1 through 6 (of 6 total)