Author Posts

[Rich Dixon]

I’d like to change the front slider to a less harsh transition, perhaps a fade. I found the link below and thought maybe I could translate the advice to my theme, but I can’t find corresponding code.

Sorry to be a pest.

https://www.spiraclethemes.com/support/topic/slider-transitions-timing/

[Spiracle Themes]

Hi Rich

You need to edit js file to achieve this. Follow the steps below

Step 1) Go to theme root folder ie somapro (wp-content/themes/somapro)

Step 2) Go to js folder

Step 3) find soma-main.js and open this in any text editor

Step 4) Go to line number 106 and add animateIn: ‘animation name’, after this and save

ie
/*– owl carousel –*/
var owl = $(‘.slider-carousel’);
owl.owlCarousel({
autoplay:true,
loop:true,
margin:0,
navSpeed:500,
nav:false,
items:1,
animateIn: ‘fadeInLeft’,

});

You can find animations from here
https://daneden.github.io/animate.css/

Best Regards

[Rich Dixon]

Thanks for the clear instructions. Problem: I’m using a child theme and the js folder of the child theme is empty. Can I still make changes?

[Spiracle Themes]

Hi Rich,

Yes, you can make these changes in child theme also. The procedure for this is a bit different. I am listing some steps here

Step 1) First of all copy your soma-main.js file from parent js folder to the child theme js folder. We will now edit the child version of soma-main.js

Step 2) Do the changes as I mentioned in above post reply i.e. you have to add animateIn property to the slider function

Step 3) Open Child’s theme functions.php and add these two lines just after this line this comment

/*— Adding a js file demo. Paste your js file inside the child theme js folder and add it like the example below —*/

wp_dequeue_script( 'soma-script');
wp_enqueue_script( 'soma-child-script', trailingslashit(get_stylesheet_directory_uri()) . 'js/soma-main.js', array('jquery'), '', true );

View Screenshot

Best Regards

[Author]

Posts