Visual Composer 图像轮播无法正确循环

Posted 2023-05-08

【中文标题】Visual Composer 图像轮播无法正确循环

【英文标题】：Visual Composer image carousel doesn't loop properly

【发布时间】：2017-01-26 20:56:47

【问题描述】：

这是我的第一篇文章，所以请原谅我的英语。

我对 Image Carousel VC 组件有疑问。我需要设置诸如标识滑块之类的东西（连续 5 个徽标），当我将其设置为显示 6 个图像中的 5 个时，最后会有一个间隙（例如 4 个空格）。

我的设置：

已添加 6 张图片， 每次观看的幻灯片：5， 滑块循环：是的

目标是设置循环播放，图像之间没有任何空格。

还有一个响应问题。当我调整浏览器窗口图像的大小时，它们的比例会丢失（宽度是缩放百分比，高度是固定的）。

谁能帮我解决这个问题？

【问题讨论】：

响应问题：宽度是 %，高度是固定的？那应该会扭曲图像。宽度 % 和高度：自动设置图像样式，使其响应宽度变化，而无需更改纵横比。

这应该可以解决您的问题。确保添加 vc_custominfiniteloop 作为额外的类名humbertosilva.com/visual-composer-infinite-image-carousel

【参考方案1】：

将 Humberto Silva 的 post 移植到 Stack Overflow 的答案中，似乎没有内置的方法可以做到这一点，但 javascript 中有一种解决方法。

首先，在轮播元素中添加一个额外的类vc_custominfiniteloop。

然后，在加载 jQuery 和 Visual Composer javascript 之后添加这段 JavaScript 代码：

/*
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);      
  );    
);

如果您遇到问题，请尝试使用 PHP_INT_MAX 并根据 jQuery 将其排入队列，例如：

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

感谢 Humberto Silva，我只是将这个答案移植到这里，以保存解决方案，以防博客离线。

【讨论】：

发现这非常有用。但是，在 enqueue scripts 函数中，对 assets/js/infinite_visualcomposer_carousel.js 文件的第一个引用缺少正斜杠

【参考方案2】：

/* 将 Visual Composer Image Carousel 变成 Visual Composer Infinite Image Carousel 在你的主题 header.php 的标签之前包含 在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; 
    

    

所有功劳归于 Humberto Silva，我只是将这个答案移植到此处以保存解决方案，以防博客离线。

刚刚根据我的需要对此代码进行了一些修复。所以不要费心问我为什么要粘贴相同的代码....