我在显示bxslider轮播时遇到了问题。
JS之前的HTML（带有WP路径var）：
<ul class="bxslider">
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="1" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="2" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="3" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="4" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="5" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="6" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="7" /></li>
<li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="8" /></li>
</ul>
JS代码：
$('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 233,
slideMargin: 0,
controls: false,
pager: false,
auto: true,
autoStart: true,
moveSlides: 1,
captions: true,
infiniteLoop: true,
onSliderLoad: function(){$('.bxslider').css('display', 'block');}
});
加载后，我得到的幻灯片是从编号№5开始而不是编号№1，并且在使用infiniteloop自动启动之后-它跳过了＃1幻灯片并直接转到№2
这是演示：http : //olegzharov.com/
尝试过：-goToNextSlide-goToSlide
但是无法实现，非常感谢您的帮助。
1）我认为问题在于js库/ jQuery插件之间存在冲突=否
2）我认为问题出在标记上，回调=否
我查看了生成的代码，发现bxSlider使用bx-clone类另外创建了8张幻灯片，所以我只是用
/* WRONG START SLIDE FIX */
.bx-clone {
display: none;
}
对bx-clone的了解不多，但是经过2天的学习，这种解决方案对我来说已经足够了。
PS这不能正常工作，因为隐藏幻灯片会无限循环。
因此，我这样做了（在加载时隐藏带有CSS的图像，并在加载后显示而不是在容器中显示）：
$(window).load(function() {
// Slider for main page
$('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 233,
slideMargin: 0,
controls: false,
pager: false,
auto: true,
autoStart: true,
moveSlides: 1,
captions: true,
infiniteLoop: true,
onSliderLoad: function(){$('.bxslider li img').css('display', 'block');}
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句