3

我对 jQuery bxSlider V4 有疑问：

  • jQuery bxSlider V4
  • 选项：寻呼机自定义
  • 没有标签的缩略图 ( <a data-slide-index="x">)
  • 拇指一个标签将动态添加jQuery

这个想法是，后台（CMS Joomla）中的用户不必手动插入所有链接：

这是我的HTML：

<div class="custom bxSliderMainContent">
    <img alt="wer 01" height="361" src="/images/werkstatt/gross/wer_01.jpg" width="537"/>
    <img alt="wer 02" height="361" src="/images/werkstatt/gross/wer_02.jpg" width="537"/>
    <img alt="wer 03" height="361" src="/images/werkstatt/gross/wer_03.jpg" width="537"/>        
</div>

对于pagerCustom，我在这里创建了这个：

<div class="custom bxSliderMainThumb">
    <img alt="wer 01" src="/images/werkstatt/klein/wer_01.jpg" height="57" width="57" />
    <img alt="wer 02" src="/images/werkstatt/klein/wer_02.jpg" height="57" width="57" />
    <img alt="wer 03" src="/images/werkstatt/klein/wer_03.jpg" height="57" width="57" />    
</div>

每个图像都缺少<a data-slide-index="x">，但是我使用 jQuery 在循环中为每个元素创建了这些：

nr = 0;
$(".bxSliderMainThumb img").each(function() {
    $(this).wrap('<a data-slide-index="' + nr + '" href="javascript:void(0);" class="icon">');
    nr++;
});

问题 - 在我看来 - 现在是，如果我现在调用滑块：

$(".bxSliderMainContent").bxSlider({
    mode : 'fade', 
    pager : false, 
    controls : false, 
    pagerCustom: '.bxSliderMainThumb'
});

在阅读了上面的 jQuery 修改内容之后，他不明白，他必须这样做。

项目链接：http: //voelserg.linux11.webhome.at/de/goldschmied-suedtirol.htm

谁能帮我找到解决方案？会很棒

提前感谢您的帮助！

4

0 回答 0