Visual Composer-Bildkarussell läuft nicht richtig

Es ist mein erster Beitrag, also verzeihen Sie bitte mein Englisch.

Ich habe ein Problem mit der Image Carousel VC-Komponente. Ich muss so etwas wie einen Logotyp-Schieberegler (5 Logos in einer Reihe) einrichten, und wenn ich es so einrichte, dass 5 von 6 Bildern angezeigt werden, ist am Ende eine Lücke (wie 4 Leerzeichen).

Meine Einstellung:

6 Bilder hinzugefügt, Slides pro Ansicht: 5, Slider Loop: ja

Ziel ist es, das Gelage so einzurichten, dass es wiederholt wird, ohne Leerzeichen zwischen den Bildern.

Es gibt auch ein responsives Problem. Wenn ich die Größe von Browserfensterbildern verändere, verlieren sie ihr Verhältnis (Breite ist Skalierungsprozentsatz und Höhe ist festgelegt).

Kann mir jemand helfen damit umzugehen?

Portierung von Humberto Silva Post in eine Stack Overflow-Antwort, scheint es keine integrierte Möglichkeit zu geben, aber es gibt eine Problemumgehung in JavaScript.

Fügen Sie zuerst eine zusätzliche Klasse hinzu vc_custominfiniteloop zum Karussellelement.

Fügen Sie dann diesen JavaScript-Code hinzu, nachdem jQuery und Visual Composer Javascript geladen wurden:

/*
Turn Visual Composer Image Carousel into Visual Composer Infinite Image Carousel
Include before the </head> tag on yout theme's header.php 
Read the detailed step-by-step at https://humbertosilva.com/visual-composer-infinite-image-carousel/
*/

// auxiliary code to create triggers for the add and remove class for later use
(function($){
$.each(["addClass","removeClass"],function(i,methodname){
    var oldmethod = $.fn[methodname];
    $.fn[methodname] = function(){
          oldmethod.apply( this, arguments );
          this.trigger(methodname+"change");
          return this;
    }
});
})(jQuery);

// main function for the infinite loop
function vc_custominfiniteloop_init(vc_cil_element_id){

  var vc_element="#" + vc_cil_element_id; // because we're using this more than once let's create a variable for it
  window.maxItens = jQuery(vc_element).data('per-view'); // max visible items defined
  window.addedItens = 0; // auxiliary counter for added itens to the end 

  // go to slides and duplicate them to the end to fill space
  jQuery(vc_element).find('.vc_carousel-slideline-inner').find('.vc_item').each(function(){
    // we only need to duplicate the first visible images
    if (window.addedItens < window.maxItens) {
      if (window.addedItens == 0 ) {
        // the fisrt added slide will need a trigger so we know it ended and make it "restart" without animation
        jQuery(this).clone().addClass('vc_custominfiniteloop_restart').removeClass('vc_active').appendTo(jQuery(this).parent());            
      } else {
        jQuery(this).clone().removeClass('vc_active').appendTo(jQuery(this).parent());         
      }
      window.addedItens++;
    }
  });

  // add the trigger so we know when to "restart" the animation without the user knowing about it
  jQuery('.vc_custominfiniteloop_restart').bind('addClasschange', null, function(){

    // navigate to the carousel element , I know, its ugly ...
    var vc_carousel = jQuery(this).parent().parent().parent().parent();

    // first we temporarily change the animation speed to zero
    jQuery(vc_carousel).data('vc.carousel').transition_speed = 0;

    // make the slider go to the first slide without animation and because the fist set of images shown
    // are the same that are being shown now the slider is now "restarted" without that being visible 
    jQuery(vc_carousel).data('vc.carousel').to(0);

    // allow the carousel to go to the first image and restore the original speed 
    setTimeout("vc_cil_restore_transition_speed('"+jQuery(vc_carousel).prop('id')+"')",100);
  });

}

// restore original speed setting of vc_carousel
function vc_cil_restore_transition_speed(element_id){
// after inspecting the original source code the value of 600 is defined there so we put back the original here
jQuery('#' + element_id).data('vc.carousel').transition_speed = 600; 
}

// init     
jQuery(document).ready(function(){    
  // find all vc_carousel with the defined class and turn them into infine loop
  jQuery('.vc_custominfiniteloop').find('div[data-ride="vc_carousel"]').each(function(){
    // allow time for the slider to be built on the page
    // because the slider is "long" we can wait a bit before adding images and events needed  
    var vc_cil_element = jQuery(this).prop("id");
    setTimeout("vc_custominfiniteloop_init('"+vc_cil_element+"')",2000);      
  });    
});

Wenn Sie Probleme haben, versuchen Sie, es mit PHP_INT_MAX in die Warteschlange einzureihen, und je nach jQuery, Beispiel:

function enqueue_my_scripts()
{
    // This example expects you to create a file with the JavaScript above in wp-content/themes/yourtheme/assets/js/infinite_visualcomposer_carousel.js
    wp_enqueue_script('infinite-vs-carousel',  get_stylesheet_directory_uri() . 'assets/js/infinite_visualcomposer_carousel.js', array('jquery'), filemtime(get_stylesheet_directory() . '/assets/js/infinite_visualcomposer_carousel.js'), true);
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', PHP_INT_MAX);

Alle Credits an Humberto Silva, ich portiere diese Antwort nur hier, um die Lösung zu speichern, falls der Blog offline geht.

/* Verwandle Visual Composer Image Carousel in Visual Composer Infinite Image Carousel Integriere vor dem Tag in der header.php deines Themes. Lesen Sie die detaillierte Schritt-für-Schritt-Anleitung unter https://humbertosilva.com/visual-composer-infinite-image-carousel/
*/

    // auxiliary code to create triggers for the add and remove class for later use
    (function($){
    $.each(["addClass","removeClass"],function(i,methodname){
        var oldmethod = $.fn[methodname];
        $.fn[methodname] = function(){
              oldmethod.apply( this, arguments );
              this.trigger(methodname+"change");
              return this;
        }
    });
    })(jQuery);

    // init     
    jQuery(document).ready(function(){    
      // find all vc_carousel with the defined class and turn them into infine loop
      jQuery('.vc_custominfiniteloop').find('div[data-ride="vc_carousel"]').each(function(){
        // allow time for the slider to be built on the page
        // because the slider is "long" we can wait a bit before adding images and events needed  
        var vc_cil_element = jQuery(this).prop("id");
        
        setTimeout(vc_custominfiniteloop_init(vc_cil_element),3000);      
      });    
    });

    // main function for the infinite loop
    function vc_custominfiniteloop_init(vc_cil_element_id){

      var vc_element="#" + vc_cil_element_id; // because we're using this more than once let's create a variable for it
     
      window.maxItens = jQuery(vc_element).data('per-view'); // max visible items defined
      window.addedItens = 0; // auxiliary counter for added itens to the end 

      // go to slides and duplicate them to the end to fill space
      jQuery(vc_element).find('.vc_carousel-slideline-inner').find('.vc_item').each(function(){
        // we only need to duplicate the first visible images
        if (window.addedItens < window.maxItens) {
          if (window.addedItens == 0 ) {
            // the fisrt added slide will need a trigger so we know it ended and make it "restart" without animation
            jQuery(this).clone().addClass('vc_custominfiniteloop_restart').removeClass('vc_active').appendTo(jQuery(this).parent());            
          } else {
            jQuery(this).clone().removeClass('vc_active').appendTo(jQuery(this).parent());         
          }
          window.addedItens++;
        }
      });

      // add the trigger so we know when to "restart" the animation without the user knowing about it
      jQuery('.vc_custominfiniteloop_restart').bind('addClasschange', null, function(){

        // navigate to the carousel element , I know, its ugly ...
        var vc_carousel = jQuery(this).parent().parent().parent().parent();

        // first we temporarily change the animation speed to zero
        jQuery(vc_carousel).data('vc.carousel').transition_speed = 0;

        // make the slider go to the first slide without animation and because the fist set of images shown
        // are the same that are being shown now the slider is now "restarted" without that being visible 
        jQuery(vc_carousel).data('vc.carousel').to(0);

        // allow the carousel to go to the first image and restore the original speed 
        setTimeout(vc_cil_restore_transition_speed(jQuery(vc_carousel).prop('id')),5000);
      });

      // // restore original speed setting of vc_carousel
    function vc_cil_restore_transition_speed(element_id){
    // after inspecting the original source code the value of 600 is defined there so we put back the original here
    jQuery('#' + element_id).data('vc.carousel').transition_speed = 5000; 
    }

    }

Alle Credits an Humberto Silva, ich portiere diese Antwort nur hier, um die Lösung zu speichern, falls der Blog offline geht.

Hat gerade einige Korrekturen an diesem Code nach meinem Bedarf vorgenommen. Fragen Sie also nicht, warum ich denselben Code einfüge….