How should I target the previous slide?


I continue my road towards jQuery/JS greatness (long way left tho), and atm I am building a slider using jQuery and TweenMax for the animations.

However, I need to target whatever slide was active before the current active slide in some way. Atm I am using prev(); which aint cutting it, just check my pen:

Here is my current code if you don’t want to go to my Pen:

  var slide = $('li'),
      slider = $('ul'),
      active = 0,
      slideLength = slide.width(),
      slideHeight = slide.height(),
      numbSlides = slide.size(),
      slideOut = new TimelineLite(),
      slideIn = new TimelineLite();
  function isActive(){
    var activeBefore = $('.is-active').prev();
    slideOut.set(activeBefore, { display: "block" })
            .to(activeBefore, 1, { x: 75, force3D: "auto", clearProps: "all" });
    slideIn.set('.is-active div', { width: slideLength, height: slideHeight })
           .from('.is-active div', 1, { x: -75, force3D: "auto", clearProps: "all" })
           .fromTo('.is-active', 1, { width: 0 }, { width: slideLength, ease: Power3.easeOut, clearProps: "all" }, "-=1");

  function prevSlide() {
      active = (active - 1) % slide.length;
  function nextSlide() {
      active = (active + 1) % slide.length;

  $('.prev').on('click', prevSlide);

  $('.next').on('click', nextSlide);

Also If you see anything else that can improve my code feel free to say so, as this is something I do to learn.

Could you save the previous active slide in a variable before you make the change? That way you always have a way to reference it?


Sorry for the late reply.

How can I do this?

I tried:
active = (active - 1) % slide.length;
lastSlide = active - 1;

But that did not work, don’t really know what to save there.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.