Get the ID or class of the (current) panel

[florushj]

I have a full width slider with navigation arrows. I need these arrows to have a specific color. (For an example, see the homepage of the apple.com website.) Light on dark slides, dark on light slides. Therefore I'd like to add a class to each slide ('dark, light', etc) and check if I need to serve the dark or light version of the navigation. Is this possible?

Maybe by checking the classes of the panels? Maybe by checking the class or ID of the current panel?

[KevinBatdorf]

Yeah, just set a class to your panels and use JavaScript to check. You can use the callback method to check stuff out. Try to console.log(this) to find the slider object. Within there you can look for your class and make changes accordingly. It will take some tweaking though.

Sorry for the late reply, been a hectic week.

[theframework]

I need the same, or just to add an 'active' class to the current slide. Have looked through the object and i cant seem to see currentPanel (for example). There is next & previous panel, but no currentPanel class. Could you advise on how to acheieve this,

Thanks in advance... and thank for the slider

[florushj]

I haven't had the time to look at the tip kevin gave. I think it should be possible without a currentPanel class, but I agree it would make stuff a lot easier to have something like $('.currentPanel').hasClass('dark') and toggle a class on the ls-nav elements accordingly. I will look into it today or tomorrow...

[KevinBatdorf]

I'll try to add that in this week. For now you can use the nextPanel variable to change the color. But you would apply the styles to each panel this way using conditionals.

I'll need time. I'm in the philippines waiting for the huriricane to pass!

[florushj]

That's awesome. Thank you for the great support and the superb slider!

[KevinBatdorf]

The latest version should have the currentPanel class added. Let me know how it works out.

[bladeodessa]

Hello Kevin, first of all, thanks for your great slider. But, unfortunately, the latest version has a bug. I'll try to explain, sorry in advance for my english. It works fine when you click a prev and next button in any directions, but when you click nxt button to switch from last element in slider to the first - "currentPanel" class stays on the last element, untill you click nxt button again, so class is jumping to the second element. When you click prv button to jump from first element to last - it still works good.

[theframework]

bump

[theframework]

Thanks

[KevinBatdorf]

I'll look into this later tonight or tomorrow. Sorry for the delay, the Internet has been slow here in the Philippines the past few weeks.

[KevinBatdorf]

I'm going to fix some other bugs before uploading the code, but if you need this fix asap (I know it took me too long to get to this), then change line 734 from

self.$panelClass.eq(self.nextPanel)

to

self.$panelClass.eq(self.sanatizeNumber(self.nextPanel) - 1 )

Again, sorry for the delay.

[theframework]

Hi Kevin,

I have tried the fix above and the current panel class does not get added correctly when continuously scrolling through the slides... Any ieas why this may be?

Thanks very much

[KevinBatdorf]

I see what you're trying to do here. Sorry this took far too long to get going. I'll have it fixed in the next update for sure this time.

  // Add it to cloned panels
  self.$clones = jQuery(_this.sliderId + ' .clone');
  if ((_this.nextPanel === -1) || (_this.nextPanel === _this.panelCount)) {
    self.$clones.addClass('currentPanel');
  } else {
    self.$clones.removeClass('currentPanel');
  }

This will add it to both clones at the same time, but since it's impossible to see a clone from one to the next, it wouldn't effect the user experience. I'll likely add a check to make sure continuous is enabled too first.