Visual Composer 图像轮播无法正常循环 [英] Visual Composer image carousel doesn't loop properly

问题描述

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

我遇到了 Image Carousel VC 组件的问题.我需要设置诸如标识滑块之类的东西(连续 5 个徽标)，当我将其设置为显示 6 个图像中的 5 个时，末尾有一个间隙(如 4 个空格).

我的设置:

添加了 6 张图片，每次观看幻灯片:5，滑块循环:是

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

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

谁能帮我解决这个问题?

解决方案

移植 Humberto Silva 的

然后，在加载 jQuery 和 Visual Composer javascript 后添加此 JavaScript 代码:

/*将 Visual Composer Image Carousel 变成 Visual Composer Infinite Image Carousel在 </head> 之前包含你主题的 header.php 上的标签在 https://humbertosilva.com/visual-composer-infinite-image-carousel/阅读详细的分步说明*///为添加和删除类创建触发器以备后用的辅助代码(功能($){$.each(["addClass","re​​moveClass"],function(i,methodname){var oldmethod = $.fn[methodname];$.fn[方法名] = 函数(){oldmethod.apply(this,arguments);this.trigger(methodname+"change");返回这个；}});})(jQuery);//无限循环的主函数函数 vc_custominfiniteloop_init(vc_cil_element_id){var vc_element = '#' + vc_cil_element_id;//因为我们不止一次使用它让我们为它创建一个变量window.maxItens = jQuery(vc_element).data('per-view');//定义的最大可见项window. addedItens = 0;//用于添加到最后的 itens 的辅助计数器//转到幻灯片并将它们复制到末尾以填充空间jQuery(vc_element).find('.vc_carousel-slideline-inner').find('.vc_item').each(function(){//我们只需要复制第一个可见图像如果(window. addedItens < window.maxItens){如果(window. addedItens == 0 ){//第一个添加的幻灯片需要一个触发器，所以我们知道它结束并让它在没有动画的情况下重新启动"jQuery(this).clone().addClass('vc_custominfiniteloop_restart').removeClass('vc_active').appendTo(jQuery(this).parent());} 别的 {jQuery(this).clone().removeClass('vc_active').appendTo(jQuery(this).parent());}window. addedItens++;}});//添加触发器，以便我们知道何时在用户不知情的情况下重新启动"动画jQuery('.vc_custominfiniteloop_restart').bind('addClasschange', null, function(){//导航到轮播元素，我知道，它丑陋...var vc_carousel = jQuery(this).parent().parent().parent().parent();//首先我们暂时将动画速度更改为零jQuery(vc_carousel).data('vc.carousel').transition_speed = 0;//使滑块在没有动画的情况下转到第一张幻灯片，因为显示的第一组图像//与现在显示的相同，滑块现在重新启动"而不可见jQuery(vc_carousel).data('vc.carousel').to(0);//允许轮播转至第一张图片并恢复原速度setTimeout("vc_cil_restore_transition_speed('"+jQuery(vc_carousel).prop('id')+"')",100);});}//恢复 vc_carousel 的原始速度设置函数 vc_cil_restore_transition_speed(element_id){//检查原始源代码后，600 的值在那里定义，因此我们将原始代码放回此处jQuery('#' + element_id).data('vc.carousel').transition_speed = 600;}//在里面jQuery(文档).ready(函数(){//找到所有具有定义类的 vc_carousel 并将它们变成 infine 循环jQuery('.vc_custominfiniteloop').find('div[data-ride="vc_carousel"]').each(function(){//留出时间在页面上构建滑块//因为滑块很长"，我们可以在添加所需的图像和事件之前稍等片刻var vc_cil_element = jQuery(this).prop("id");setTimeout("vc_custominfiniteloop_init('"+vc_cil_element+"')",2000);});});

如果您遇到问题，请尝试使用 PHP_INT_MAX 并根据 jQuery 对其进行排队，例如:

函数 enqueue_my_scripts(){//这个例子期望你在 wp-content/themes/yourtheme/assets/js/infinite_visualcomposer_carousel.js 中用上面的 JavaScript 创建一个文件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_carousel.composer),true_carousel.composer);}add_action('wp_enqueue_scripts', 'enqueue_my_scripts', PHP_INT_MAX);

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

It's my first post, so please be forgiving for my english.

I have an issue with Image Carousel VC component. I need to set up something like logotypes slider (5 logos in a row) and when i set it up to display 5 from 6 images there is a gap on the end (like 4 empty spaces).

My seting:

6 images added, Slides per view: 5, Slider loop: yes

Goal is to set up carouse to be looped, without any empty spaces between images.

There is also a responsive issue. When i resize browser window images losing their ratio (width is scaling percentage and height is fixed).

Can anyone help me deal with that?

解决方案

Porting Humberto Silva's post into a Stack Overflow answer, it seems there's no built-in way to do this, but there's a workaround in JavaScript.

First, add an extra class vc_custominfiniteloop to the carousel element.

Then, add this JavaScript code after jQuery and Visual Composer javascript has been loaded:

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

If you're having trouble, try enqueuing it with PHP_INT_MAX and depending on jQuery, example:

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

All credits to Humberto Silva, I'm just porting this answer here to save the solution in case the blog goes offline.

这篇关于Visual Composer 图像轮播无法正常循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！