Wordpress 是否可以在可分页容器（visual composer）上显示箭头？

我正在用VisualComposer开发我的WordPress网站

我需要包括一个可分页的容器，但它将是伟大的，如果它可以像一个幻灯片

提前感谢,

---

注意：）

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

< p>要创建它，我创建了一个3列的行，中间列中有可分页的容器，两边的列中有左箭头和右箭头图像。p> 箭头图像和可分页容器都有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);

---

其中#id_of _pageable_container是您为您的可分页容器提供的id

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

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

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

函数预览幻灯片（）{
const slides=document.getElementsByClassName（'vc_pagination-item'）；
for（设i=0；i=slides.length）返回；
幻灯片[i+1]。第一个孩子。单击（）；
返回；
}
}
}

添加按钮小部件并设置href以调用js：

对于左箭头按钮

javascript:prevSlide();

javascript:nextSlide();

对于右箭头按钮

javascript:prevSlide();

javascript:nextSlide();

---

希望这能有所帮助。

您能提供到目前为止所做工作的详细信息吗？感谢您提供此解决方案！：）这看起来有点问题，你优化了吗？像慢速任意信息（有时不加载，crops）一样，我似乎无法在行/列中获得可分页的容器-这甚至不是我的选项。我遗漏了什么？@Dustin-在WP Bakery中，你不能在嵌套行中放置可分页容器-这可能是你的问题吗？@FilipeOS-抱歉，你遇到了问题-动画效果是从WP Bakery本身利用的，脚本只是触发它们。我会先让一个普通的可分页容器顺利工作，然后再从那里开始工作。