javascript - 让 swipeJS 使用 ajax 加载的内容

Question

我正在创建一个当前正在test2.applicationcreations.net测试的站点。具有动态更改图像的图像库。我正在为滑块使用swipeJS。

当您导航到项目库然后到自定义主页时，会加载具有正确格式的新 HTML，但旋转器不起作用。我认为问题在于 swipeJS 没有在新代码上初始化。我尝试使用将新项目传递给对象，window.mySwipe = new Swipe(document.getElementById('slider'));但我没有运气。

出于某种原因，如果我在 Chrome 18 OS X 上单击检查元素，则旋转器可以处理新内容。

非常感谢任何帮助使这项工作正常进行。谢谢你。

Answer 1

Yup, you got it right, once you have added the new element, all you need to do is reinitialize the mySwipe object.

This is the first initialization of the swipe slider object:

/*----------------------------------------
  Swipe slider to enable touch sliding
----------------------------------------*/
document.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 0,
  speed: 400,
  auto: 5000,
  callback: function(event, index, elem) {
    // do something cool
  }
});

Now just define a method which re-initializes the swipe object.

/*----------------------------------------
  Reinitializing the Swipe Slider.
----------------------------------------*/
document.reinit = function(){
  document.mySwipe = new Swipe(document.getElementById('slider'), {
    startSlide: 0,
    speed: 400,
    auto: 5000,
    callback: function(event, index, elem) {
      // do something cool
    }
  });
}

Call that method when you have finished adding new elements to the existing slider.

// Finished adding new elements
document.reinit();