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：

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

#id_of_pageable_container是您赋予可分页容器的ID

Answer 2

仅使用香草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();

希望这会有所帮助。

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

2 个答案: