jquery - 通过将 jquery 滑块绑定到 ajax 加载的图像，在同一页面上设置多个滑块

Question

需要一些 Jquery 帮助。

我想在我的页面上使用http://www.basic-slider.com/ 。我有无限滚动，它添加了新图像。有些是一组图像，所以我想为这些组添加一个滑块。它看起来像这样。

<ul class="images">
   <li id="1">  <img1>
                <img2>
                <img3> </li>
   <li id="2"> 
                <img1></li>
   <li id="3">
                <img2>
                <img3> </li>
.
.
<ul>

无限负载将通过 ajax 添加更多<li>内容.images。我可以进行 html 更改，例如将图像放入另一个<ul>但不确定如何更改 jquery 代码。

请帮忙。

Answer 1

好的，所以你可以做这样的事情。

var imageBlock = 0; //THIS IS GLOBAL

然后创建一个初始化滑块插件的函数

function initializeSlider(imageBlock){
    $('#images' + imageBlock).bjqs({
      'height' : 320,
      'width' : 620,
      'responsive' : true
    });
 }

然后当你滚动时 closeToBottom

if(closeToBottom){
  imageBlock = imageBlock + 1;
  initializeSlider(imageBlock);
}

您也可以在页面加载时执行相同的操作。

注意：使用递增索引添加您创建的 ul 元素。