Question

我遇到了一个我正在使用的wordpress主题的问题。进一步的信息：

主题名称：语言学校（标签也来自他）

Slider插件名称：DHVC WooCommerce Slider（sitesao）

问题是：我已经制作了一些标签，并且在每个标签中我使用滑块中的短代码。

每一个都是摄影，视频编辑，光技术等类别。第一个标签工作正常，如上图所示：

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

将以下内容放入主题的function.php

中

add_action( 'wp_footer', function() {
?>
<script>
    jQuery( function() {
        jQuery( '.cmsmasters_tabs ul.cmsmasters_tabs_list li a' ).on( 'click', function() {
            // When the tab is changed set width of slider items and width of slider in active tab to something reasonable
            var itemWidth = 20;
            var items = jQuery( 'div.cmsmasters_tab.active_tab div.owl-item' ).width( itemWidth + 'vw' );
            jQuery( 'div.cmsmasters_tab.active_tab div.owl-stage' ).width( jQuery( 'div.cmsmasters_tab.active_tab div.owl-item' ).length * itemWidth + 'vw' );
        } );
    } );
</script>
<?php
}, 1000000 );

这只是第一次迭代，可能需要进行大量调整。（您可以更改itemWidth并查看它具有的效果。现在设置为绝对值，但可能需要相对于某个父容器的宽度设置。）我无法在我的安装上运行此实验，因此您需要自己这样做。幻灯片增量也需要修复，但我们将在初始显示工作后稍后修复。

Answer 2

根据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函数上尝试更大的值。

标签在Wordpress主题中破坏我的滑块CSS

2 个答案: