Hi all,

We're struggling with an odd theming implementation that would be much easier to surmount if only there were "first" and "last" classes applied to the currently visible items in the carousel. Or perhaps, an incrementing numbered class applied to each frame, e.g., "frame-1"

Comments

danielhonrade’s picture

danielhonrade commented

this classes could be a great helper for themers like me

danielhonrade’s picture

danielhonrade commented

I found a way to do this by adding a jquery script:

My settings are: show 2 items and move 1 item at a time

So manually selecting the item position and adding first or last depending on the ul.jcarousel position, you have to measure each item width, mine is 880px...

setInterval(function(){
  var position = $('.jcarousel').position();
  $('.jcarousel-item').removeClass('left').removeClass('right');
  if(position.left == 0) {
    $('.jcarousel-item:nth-child(1)').addClass('left');
    $('.jcarousel-item:nth-child(2)').addClass('right');
  }	
  else if(position.left >= -880) {
    $('.jcarousel-item:nth-child(2)').addClass('left');
    $('.jcarousel-item:nth-child(3)').addClass('right');
  }
  else if(position.left >= -1760) {
    $('.jcarousel-item:nth-child(3)').addClass('left');
    $('.jcarousel-item:nth-child(4)').addClass('right');
  }		
  else if(position.left >= -2640) {
    $('.jcarousel-item:nth-child(4)').addClass('left');
    $('.jcarousel-item:nth-child(5)').addClass('right');
  }		
  else if(position.left >= -3520) {
    $('.jcarousel-item:nth-child(5)').addClass('left');
    $('.jcarousel-item:nth-child(6)').addClass('right');
  }				
}, 500);

The above code should change depending on the item's width and items to show and how many item to slide at a time.