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/
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
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?
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 );Best Regards