[英]jquery slider not working in visual composer custom shortcode in wordpress
我正在尝试在Visual Composer中创建自定义短代码,当我应用文本,标题,单个图像时一切正常,但是现在我需要使用滑块创建自定义短代码,我的jQuery无法使用滑块。 我已经检查过包含jQuery,但是图像没有显示为滑块,而是显示为单个图像。我在每个循环中都写了“ div”,是否正确?
我的图像代码是
foreach($image_ids as $image_id)
{
$images = wp_get_attachment_image_src($image_id, 'company_logo');
$html.= '<div id="slideshow"><a href="#" class="slideshow-prev">«</a><ul><li>';
$html.='<img src="'.$images[0].'" alt="'.$atts['title'].'">';
$html.= '</li></ul><a href="#" class="slideshow-next">»</a></div>';
$images++;
}
jQuery代码是:
//an image width in pixels
var imageWidth = 600;
//DOM and all content is loaded
$(window).ready(function () {
var currentImage = 0;
//set image count
var allImages = $('#slideshow li img').length;
//setup slideshow frame width
$('#slideshow ul').width(allImages * imageWidth);
//attach click event to slideshow buttons
$('.slideshow-next').click(function () {
//increase image counter
currentImage++;
//if we are at the end let set it to 0
if (currentImage >= allImages) currentImage = 0;
//calcualte and set position
setFramePosition(currentImage);
});
$('.slideshow-prev').click(function () {
//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if (currentImage < 0) currentImage = allImages - 1;
//calcualte and set position
setFramePosition(currentImage);
});
});
//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos) {
//calculate position
var px = imageWidth * pos * -1;
//set ul left position
$('#slideshow ul').animate({
left: px
}, 300);
}
您的for循环是错误的。 尝试这个。
$Inc = 0;
foreach($image_ids as $image_id)
{
$images = wp_get_attachment_image_src($image_id, 'company_logo');
$html.= '<div id="slideshow"><a href="#" class="slideshow-prev">«</a><ul><li>';
$html.='<img src="'.$images[$Inc].'" alt="'.$atts['title'].'">';
$html.= '</li></ul><a href="#" class="slideshow-next">»</a></div>';
$images++;
$Inc++;
}
和你的js
//an image width in pixels
var imageWidth = 600;
//DOM and all content is loaded
jQuery(document).ready(function($){
var currentImage = 0;
//set image count
var allImages = $('#slideshow li img').length;
//setup slideshow frame width
$('#slideshow ul').width(allImages * imageWidth);
//attach click event to slideshow buttons
$('.slideshow-next').click(function () {
//increase image counter
currentImage++;
//if we are at the end let set it to 0
if (currentImage >= allImages) currentImage = 0;
//calcualte and set position
setFramePosition(currentImage);
});
$('.slideshow-prev').click(function () {
//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if (currentImage < 0) currentImage = allImages - 1;
//calcualte and set position
setFramePosition(currentImage);
});
});
//calculate the slideshow frame position and animate it to the new position
//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos) {
//calculate position
var px = imageWidth * pos * -1;
//set ul left position
jQuery('#slideshow ul').animate({
left: px
}, 300);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.