To see this working, head to your live site.

Swipeview - show preview/snippet of next item?

I am using Swipeview (http://cubiq.org/swipeview) to create a touch-enabled carousel working on an iPhone and Android. The basics works great. My problem starts when i try to get it to show 25% of the next slide pr default. The idea is that the user can see 1/4 of the next slide/image, which should then make them slide the image to reveal the next slide/image. The first image then disapears, the second image becomes 100% visible, aligned to the left, and the 3rd image is then visible by 1/4. And so on. I have tried changing the div.style.cssText (in swipeview.js) to have a width of 75% instead of the default 100%. This works for the initial load, but when i scroll, the part of the 2nd image that was visible on slide 1, is now hidden on slide 2. I made a fiddle to demonstrate: http://jsfiddle.net/zeqjN/1/ (test it in Chrome and try dragging the image to the left) Any ideas as to how i can modify swipeview.js to fit my needs?

1 comment

Answers (1)

AnswerDeveloper

Feb 03

One way to achieve the desired behavior is to modify the handleEvent method in the SwipeView class in swipeview.js to update the CSS styles of the slides whenever the carousel is scrolled. You can set the width of each slide to 75% and the right margin to 25% of the slide width. This way, when the carousel is scrolled, the margins will adjust accordingly and maintain the desired appearance of 25% visibility of the next slide.

Here's an example implementation:


handleEvent: function (e) {
  switch (e.type) {
    case 'touchstart': this.onTouchStart(e); break;
    case 'touchmove': this.onTouchMove(e); break;
    case 'touchend': this.onTouchEnd(e); break;
    case 'webkitTransitionEnd':
    case 'msTransitionEnd':
    case 'oTransitionEnd':
    case 'otransitionend':
    case 'transitionend': this.transitionEnd(e); break;
    case 'resize': this.setup(); break;
  }
  e.stopPropagation();
},

onTouchStart: function (e) {
  var point = e.touches ? e.touches[0] : e;
  this.pages[this.currentPage].className = '';
  this.startX = point.pageX;
  this.startY = point.pageY;
  this.dx = 0;
  this.dy = 0;
  this.scrolling = false;
  this.content.style.webkitTransitionDuration = this.options.duration + 'ms';
  this.isScrolling = undefined;
  this.setSlideStyles();
  e.preventDefault();
},

setSlideStyles: function() {
  for (var i=0; i<this.slides.length; i++) {
    this.slides[i].style.width = "75%";
    this.slides[i].style.marginRight = "25%";
  }
},

Note that this is just a sample implementation and you may need to make further adjustments to swipeview.js to fit your needs.