Ist es möglich, Pfeile auf einem auslagerbaren Container (Visual Composer) anzuzeigen?

Ich arbeite an meiner WordPress-Website mit Visual Composer.

Ich muss einen auslagerbaren Container einfügen, aber es wäre großartig, wenn es wie eine Diashow sein könnte.

Dies ist mein auslagerbarer Container

Danke im Voraus,

Grüße 🙂

Basierend auf der aktuellen Version von WP Bakery Page Builder funktioniert das Folgende für mich:

Um es zu erstellen, habe ich eine Zeile mit 3 Spalten erstellt, mit dem auslagerbaren Container in der mittleren Spalte und den linken und rechten Pfeilbildern in den Spalten auf beiden Seiten.

Beiden Pfeilbildern und dem auslagerbaren Container wurden IDs gegeben. In meinem Beispiel waren die IDs der Pfeile #arrow_prev bzw. #arrow_next. Sie können Ihrem auslagerbaren Container eine beliebige eindeutige ID zuweisen.

(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);

Wenn Sie einen Pseudo-Einblendeffekt wünschen, können Sie dieses zusätzliche CSS in Ihrem Stylesheet verwenden:

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

Wobei #id_of_pageable_container die ID ist, die Sie Ihrem auslagerbaren Container gegeben haben

Eine einfachere Lösung nur mit Vanilla js:

Die Idee ist, die Zielseitenschaltfläche zu finden und programmgesteuert zu drücken, sodass die Animationen des Plugins nicht wie in der Lösung von Chaz nachgeahmt werden müssen.

1. Js hinzufügen (über das Raw JS-Widget / auf andere Weise):

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;
        }
    }
}

2. Fügen Sie Schaltflächen-Widgets hinzu und legen Sie href fest, um js aufzurufen:

Für die linke Pfeiltaste,

javascript:prevSlide();

Für die rechte Pfeiltaste,

javascript:nextSlide();

Hoffe das hilft.

Ich verwende dafür lieber das Post Grid-Widget. Denken Sie daran, dass der auslagerbare Container nicht vollständig reaktionsfähig ist, er reagiert nicht auf Berührungen durch Wischen, aber das Post Grid tut es.

Post Grid ist wirklich mächtig, obwohl es auch seine Einschränkungen hat. Sie können Ihre Inhalte mit Beiträgen und Seiten oder einem benutzerdefinierten Beitragstyp erstellen und dann aus den Widget-Optionen filtern, was Sie in Ihrem Schieberegler anzeigen möchten.

Im “erweiterten Modus” können Sie mit dem Grid Builder Ihre eigene Vorlage erstellen und die Ausgabe steuern.

Die einzigen Probleme, die ich bei dieser Methode gefunden habe, sind das Festlegen einer variablen Höhe in den Schiebereglern und dass manchmal Inhalte langsam geladen werden und kein Lazyload möglich ist.