Help with the CSS HTML JS please


#1

How does this code work?
When I look through the HTML, it doesn't contain the "active-slide" class, but it is somehow able to slide between images/pages by adding that class.
I understand that the 'next()' will toggle to the next sibling in the "active-slide" class, but from the HTML it doesn't appear to be any siblings or elements of that sort at all.
What am I missing here?
Help would be greatly appreciated!

//CSS
    .active-slide {
        display: block;
    }

//JavaScript
    $('.arrow-next').click(function(){
            var currentSlide = $('.active-slide');
            var nextSlide = currentSlide.next();
            
            currentSlide.fadeOut(600).removeClass('active-slide');
            nextSlide.fadeIn(600).addClass('active-slide');
    });

Thanks!


#2

Hi Mark,

I think you're mistaken about next(). next() goes to the next sibling, regardless of what .classes or #ids the sibling may have. So, the .active-slide class is just used to keep track of which slide is currently being shown, and next() and prev() go to the next and previous siblings, respectively, so the user can navigate forward and backward through the slides.

Does this help any?


#3

Hmm, well kind of, but the thing I don't understand then is still,
from which sibling it toggles between.

If I have a:

UL
-LI < selected
-LI
-LI

so in the case above, then next() will go to the next LI, right?

But in the code example, currentSlide = ".active-slide" which should mean that if next() is used, then it should go to the sibling of ".active-slide", but it doesn't appear to have a sibling at all.
So what is going on then?


#4

It turned out the class="active-slide" was there after all.
It would be nice if it was possible to use cmd+F to search through the code, because I did, but it couldn't toggle through the words inside the code, only outside.
I looked and looked but simply missed it.

That explains why it is working though.


#5

Right, sorry I didn't point that out to you in my post, I misread your post as you thinking each slide should have the .active-slide class - I'm glad you figured that out :)

I definitely agree about Ctrl/Cmd + F to search through code! Feel free to submit that to the Codecademy Platform Problems and Suggestions subcategory - I'm sure lots of people also want that :)