Tabs + Slider = Content Disappearing

I found this thread https://xtemos.com/forums/topic/woodmart-slider-disappear/ but the screenshot has been removed it seems.

I have the same issue, I tried to re-create a similar thing in html + jquery and it does the same thing, I can only see the newly switched content after resizing the window, I tried to use the jquery resize function but that doesn’t work either.. Hopefully there’s a fix!

Hello,

Please provide me with the steps to reproduce the issue with some screenshots to check it myself and help you out accordingly. Also share the wp logins details in the private content so i will check and give you a possible solution.

Best Regards.

[Tom]

Thanks for the quick reply Aizaz,

Create two Xtemos Sliders, create HTML blocks, one for each slider then create Xtemos tabs. (page I’m working on is called ‘How To’ or how-to is the slug)

Add a Xtemos Tab with Elementor, add the HTML block for slider #1 under tab 1 and the HTML block for slider #2 under tab 2.

Note: this is the same experience with the stock Tab widget also, once you make the window smaller or larger the content displays.

Hopefully there’s a way to just render both of the blocks/widgets on load instead of waiting for the resize to do it.

I’ve pushed my development content into my public web server and have attached credentials via Private Content

• This reply was modified 7 months, 2 weeks ago by Tom.

Hello,

Please disable the 2fa then I will check the site from the backend and try to solve the issue.

Best Regards.

2fa removed

Any luck Aizaz?

Hello,

Sorry for the delay.

Unfortunately, the slider library does not assume hiding the carousel when the page loads.

We can suggest a custom code to solve this issue partially:

(function($) {
	$(document).on('click', '.wd-tabs .wd-nav-tabs > li', function (e) {
		var $slider = $(this).parents('.wd-tabs').find('.wd-slider');

		if ( $slider.length ) {
			setTimeout( function () {
				$slider.flickity('resize');
			}, 150)
		}
	});
	})(jQuery);

Please add the code to the functions.php of the child theme.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise,

I added it to my functions.php but i get the following error when I view the site now.
Parse error: syntax error, unexpected token “$”, expecting variable in D:\wamp64\www\wp-content\themes\woodmart-child\functions.php on line 9

this is my functions.php

<?php
/**
* Enqueue script and styles for child theme
*/
function woodmart_child_enqueue_styles() {
wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘woodmart-style’ ), woodmart_get_theme_info( ‘Version’ ) );
}
add_action( ‘wp_enqueue_scripts’, ‘woodmart_child_enqueue_styles’, 10010 );
(function($) {
$(document).on(‘click’, ‘.wd-tabs .wd-nav-tabs > li’, function (e) {
var $slider = $(this).parents(‘.wd-tabs’).find(‘.wd-slider’);

if ( $slider.length ) {
setTimeout( function () {
$slider.flickity(‘resize’);
}, 150)
}
});
})(jQuery);

Hi Support, any chance of an update before the weekend? 🙂

Hello,

Sorry, It was my mistake,

Please move the code to the Theme Settings > Custom JS > On document ready.

If you have any questions please feel free to contact us.

Best Regards

Thank you, this works just fine

You are welcome!

Wish you a wonderful day!

[Author]

Posts