javascript - 选项卡破坏了我在 Wordpress 主题中的 slider CSS

Question

我在使用 wordpress 主题时遇到问题。更多信息:

主题名称:Language School(tab也是他的)

slider 插件名称:DHVC WooCommerce Slider(sitesao)

问题是:我制作了一些选项卡，在每个选项卡中我都使用 slider 中的简码。

它们中的每一个都是一个类别，例如摄影、视频编辑器、光技术。第一个选项卡工作正常，如上图所示:

https://i.imgur.com/yh6ozxu.png (抱歉，没有足够的代表发布图片)

但是其他的有一个糟糕的 css 配置，如下图所示:

https://i.imgur.com/2zQxVVh.png (抱歉，没有足够的代表张贴图片)²

一个叫magenta的用户帮我说是css需要重写的问题。这些是类的:div.owl_stage 和div.owl-item，他们需要固定他的宽度。

之后，css transform:translate3d 也需要覆盖。

我试图在我的 wordpress css 编辑器中做这个，但它只修复了图像。他说它需要用javascript代码(10~20行代码)制作，但我不太了解js。有人可以帮帮我吗？

如果需要，这是网站:https://estudefotografia.com/teste还有我说的标签。

谢谢大家!抱歉任何英语错误，它不是我的母语。

Answer 1

基于 magenta answer ，你可以试试这段代码:

jQuery(function() {
    jQuery('.cmsmasters_tabs ul.cmsmasters_tabs_list li a')
        .on('click', function() {
            // Defines width for animation
            jQuery('div.cmsmasters_tab div.owl-stage').width('150vw');
            jQuery('div.cmsmasters_tab div.owl-item').width('20vw');

            // Delay to not be overridden
            setTimeout(function() {
                var stageElement = jQuery('div.cmsmasters_tab.active_tab div.owl-stage');
                var itemElements = jQuery('div.cmsmasters_tab.active_tab div.owl-item');
                var windowWidth = jQuery(window).width();
                // Width defined based on breakpoints
                var itemWidth = windowWidth > 1024?
                    313.333:
                    windowWidth <= 1024 && windowWidth>= 600?
                        windowWidth * .3:
                        windowWidth * .9;
                // Apply the changes
                itemElements.width( itemWidth + 'px' );
                stageElement.width( itemElements.length * itemWidth + 'px' );
            }, 200);
        });
});

问题是小部件代码在您的 jQuery 代码之后执行，延迟颠倒了顺序。这将调整移动并在小部件错误计算宽度后采取行动。如果代码一开始不起作用，请在 setTimeout 函数上尝试更大的值。