Visual Composer 图像轮播无法正确循环
Visual Composer image carousel doesn't loop properly
这是我的第一个post，所以请原谅我的英语。
我的图片轮播 VC 组件有问题。我需要设置类似徽标滑块（连续 5 个徽标）的东西，当我将其设置为显示 6 个图像中的 5 个时，末端有一个间隙（如 4 个空格）。
我的设置：
添加了 6 张图片，
每个视图的幻灯片：5，
滑块循环：是
目标是设置循环播放，图像之间没有任何空白。
还有一个响应问题。当我调整浏览器大小时 window 图像失去比例（宽度是缩放比例，高度是固定的）。
谁能帮我处理一下？
将 Humberto Silva 的 post 移植到 Stack Overflow 答案中，似乎没有内置方法可以做到这一点，但 JavaScript.
中有一个解决方法
首先，将额外的 class 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，我只是将此答案移植到此处以保存解决方案，以防博客离线。
/*
将 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，我只是将此答案移植到此处以保存解决方案，以防博客离线。
刚刚根据我的需要对此代码进行了一些修复。所以不要问我为什么粘贴相同的代码....
这是我的第一个post，所以请原谅我的英语。
我的图片轮播 VC 组件有问题。我需要设置类似徽标滑块（连续 5 个徽标）的东西，当我将其设置为显示 6 个图像中的 5 个时，末端有一个间隙（如 4 个空格）。
我的设置：
添加了 6 张图片， 每个视图的幻灯片：5， 滑块循环：是
目标是设置循环播放，图像之间没有任何空白。
还有一个响应问题。当我调整浏览器大小时 window 图像失去比例（宽度是缩放比例，高度是固定的）。
谁能帮我处理一下？
将 Humberto Silva 的 post 移植到 Stack Overflow 答案中，似乎没有内置方法可以做到这一点，但 JavaScript.
中有一个解决方法首先，将额外的 class 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，我只是将此答案移植到此处以保存解决方案，以防博客离线。
/* 将 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，我只是将此答案移植到此处以保存解决方案，以防博客离线。
刚刚根据我的需要对此代码进行了一些修复。所以不要问我为什么粘贴相同的代码....