3

我正在使用 Visual Composer 在我的 WordPress 网站上工作。

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

这是我的可分页容器

提前致谢，

问候 ：）

4

3 回答 3

5

基于 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

于 2019-02-13T15:10:19.547 回答
1

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

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

  1. 添加 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;
        }
    }
}
  1. 添加按钮小部件并设置href以调用js：

对于左箭头按钮，

javascript:prevSlide();

对于右箭头按钮，

javascript:nextSlide();

希望这可以帮助。

于 2020-11-17T07:08:06.907 回答
0

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

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

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

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

于 2021-08-29T10:25:21.907 回答