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

问题

I'm working on my WordPress website with Visual Composer.

I need to include a pageable container but it would be great if it can be like a slideshow.

This is my pageable container

Thanks in advance,

Regards :)

回答1:

Based upon the current version of WP Bakery Page Builder the below works for me:

To build it I created a row with 3 columns, with the pageable container in the middle column and the left and right arrow images in the columns on either side.

Both arrow images and the pageable container were given IDs. In my example the IDs of the arrows were #arrow_prev and #arrow_next respectively. You can give your pageable container any unique 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);

If you want a pseudo fading-in effect then you can use this additional CSS in your style sheet:

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

Where #id_of_pageable_container is the ID that you gave your pageable container

来源：https://stackoverflow.com/questions/38569567/is-it-possible-to-arrows-on-a-pageable-container-visual-composer

标签

wordpress

wordpress-theming

visual-composer