是否可以在可分页容器（视觉作曲家）上使用箭头？

Question

我正在使用 Visual Composer 开发我的 WordPress 网站。

我需要包含一个可分页的容器，但如果它能像幻灯片一样就更好了。

This is my pageable container

提前致谢，

此致:)

Answer 1

基于当前版本的 WP Bakery Page Builder，以下适用于我：

为了构建它，我创建了一个包含 3 列的行，中间列中有可分页容器，两侧列中有左右箭头图像。

箭头图像和可分页容器都被赋予了 ID。在我的示例中，箭头的 ID 分别为#arrow_prev 和#arrow_next。您可以为可分页容器提供任何唯一 ID。

(function ($) {

$(document).ready(function(){

    $( '#arrow_prev' ).click( function( e ) {
        var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
        move_pageable_container(pageable_container,'prev');
    });

    $( '#arrow_next' ).click( function( e ) {
        var pageable_container = $(this).closest(".vc_row").find(".vc_tta-panels-container");
        move_pageable_container(pageable_container,'next');
    });

    function move_pageable_container(pageable_container,direction){

        // Make a list of the panel IDs
        var panel_ids = $(pageable_container.find(".vc_tta-panel"))
            .map(function() { return this.id; }) // convert to set of IDs
            .get();

        // Find position of the active panel in list
        var current_active_pos = panel_ids.indexOf($(pageable_container).find(".vc_tta-panel.vc_active").attr('id'));

        var new_pos = 0;

        switch(direction) {
            case 'prev':
                if (current_active_pos > 0){
                    new_pos = current_active_pos-1;
                }else{
                    new_pos = panel_ids.length-1;
                }
                break;
            case 'next':
                if (current_active_pos < panel_ids.length-1){
                    new_pos = current_active_pos+1;
                }else{
                    new_pos = 0;
                }
            break;
        }

        // Clear active panels
        $(pageable_container.find(".vc_tta-panel")).each(function(i,a) {
            $(this).removeClass("vc_active");
        });

        var new_active_panel = $(pageable_container).find('#'+ panel_ids[new_pos]);

        $(new_active_panel).addClass("vc_animating");
        $(new_active_panel).addClass("vc_active");

        setTimeout(
            function(){
                $(new_active_panel).removeClass("vc_animating");
        }, 350);
    }

}
);
})(jQuery);

如果你想要一个伪淡入效果，那么你可以在你的风格中使用这个额外的 CSS sheet:

#id_of_pageable_container .vc_tta-panel.vc_animating {
     opacity: 0!important;
}

其中 #id_of_pageable_container 是您为可分页容器提供的 ID

Answer 2

仅使用 vanilla js 的更简单的解决方案：

想法是找到目标页面按钮并以编程方式按下它，这样就不需要像 Chaz 的解决方案那样模仿插件的动画。

添加 js（通过 Raw JS 小部件/其他方式）：

function prevSlide () {
    const slides = document.getElementsByClassName('vc_pagination-item');
    for (let i = 0; i < slides.length; i++) {
        if (slides[i].className.includes('vc_active')) {
            if (i - 1 < 0) return;
            slides[i - 1].firstChild.click();
            return;
        }
    }
}
function nextSlide () {
    const slides = document.getElementsByClassName('vc_pagination-item');
    for (let i = 0; i < slides.length; i++) {
        if (slides[i].className.includes('vc_active')) {
            if (i + 1 >= slides.length) return;
            slides[i + 1].firstChild.click();
            return;
        }
    }
}

添加按钮控件并设置href调用js:

对于左箭头按钮，

javascript:prevSlide();

右箭头按钮，

javascript:nextSlide();

希望对您有所帮助。

Answer 3

我更喜欢为此使用 Post 网格小部件。请记住，可分页容器并非完全响应，它不会对滑动触摸做出反应，但 Post 网格会。

Post 网格真的很强大，虽然它也有它的注意事项。您可以使用 post 和页面或自定义 post 类型创建您的内容，然后从小部件选项中过滤您想要在滑块中显示的内容。

在“高级模式”下，您可以使用 Grid Builder 创建自己的模板并控制输出。

我发现使用此方法的唯一问题是在滑块中设置可变高度，有时它加载内容很慢并且无法进行延迟加载。

是否可以在可分页容器（视觉作曲家）上使用箭头？

Is it possible to arrows on a pageable container (visual composer)?

wordpress

wordpress-theming

visual-composer