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

Question

我正在使用 Visual Composer 处理我的 WordPress 网站。

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

这是我的可分页容器

提前致谢，

问候 ：）

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：

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

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