Question

I am making a site currently being tested at test2.applicationcreations.net. With an image gallery that dynamically changes the images. I’m using swipeJS for the slider.

When you navigate to project gallery then to custom homes the new HTML with correct formatting loads in but the rotator does not work. I believe the problem is that swipeJS is not initialized on the new code. I have tried passing the new items to the object using window.mySwipe = new Swipe(document.getElementById('slider')); but I have had no luck.

For some reason if I click on inspect element on Chrome 18 OS X the rotator works with the new content.

Any help getting this working is greatly appreciated. Thank you.

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();