Flipboard


#1



https://www.codecademy.com/en/courses/web-beginner-en-seyrq/0/12?content_from=make-an-interactive-website%3Ajquery-effects


var main = function() {
    $('.dropdown-toggle').click(function() {
       $('.dropdown-menu').toggle(); 
    });
    
    $('.arrow-next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();
        
        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();
       
        if(nextSlide.length === 0) {
            nextSlide = $('.slide').first();
            nextDot = $('.dot').first();
        }
       
        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');
        
        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
       
    });
    
    $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();
        
        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();
        
        if(prevSlide.length == 0) {
            prevSlide = $('.slide').last();
            prevDot = $('.dot').last();
        }
        
        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');
        
        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
        
    });
    
    
    $('.dot').click(function() {
        var currentSlide = $('.active-slide');
        var currentDot = $('.active-dot');       
       
        currentDot.removeClass('active-dot');
        $(this).addClass('active-dot');
        
        //console.log($(this).index());
        var num = $(this).index() + 1;
       
        currentSlide.fadeOut(600).removeClass('active-slide');
        $('.slider .slide:nth-child(' + num + ')').fadeIn(600).addClass('active-slide');
    });
};

$(document).ready(main);

I just saw a code posted by someone an improved way to create a slider and i wanted someone to explain me if possible how the last lines of the extra code work.As far as i understood (I hope is right) this code
var num = $(this).index() + 1;

Gets the index 0 based position of the dots we re clicking on but after the other lines of code make me confused.To be more exact this part " $('.slider .slide:nth-child(' + num + ')') " is a lil hard to understand how exactly works. Maybe someone can help me figure how this code works


#2

Hi @ad01,

$('.slider .slide:nth-child(' + num + ')') " is a lil hard to understand how exactly works

num, which we defined earlier, is a variable equal to the dot's numerical position; for example, with this:

<ul>
  <li>&bull;</li>
  <li>&bull;</li>
  <li>&bull;</li> <!-- this one -->
  <li>&bull;</li>
</ul>

if we click the third <li>, the one with the comment beside it, then num will be equal to 3, since it's the third list item.

So, the line of code you asked about:

$('.slider .slide:nth-child(' + num + ')')

Because we're using string concatenation to use the num variable, that line of code would be seen as this by the browser:

$('.slider .slide:nth-child(3)');

Does this help any? :slight_smile:


#3

so this line of code
$('.slider .slide:nth-child(3)');

it points to the 3 rd child of the .slider class or of the .slide class? As far as I understood it takes the position of the dot we re clicking on based on 0 index position then it adds 1 so instead of 2 is 3 then it selects the .slider class and grabs it's number 3 child?


#4

@ad01

it points to the 3 rd child of the .slider class or of the .slide class?

.slider .slide is a CSS descendant selector. It means “Get all elements with the slide class that are children of an element with the slider class”. There's no need for this, it could just be .slide like we did for the previous and next buttons.

You seem to understand :nth-child(3) correctly. It gets the third element that is returned by the .slider .slide.

:nth-child() starts counting from one, but index() will return a 0-based index, which is why we have to add 1 to the number it returns.

Any more questions? :slight_smile:


#5

now it s clear, thank you for your time :slight_smile:


#6

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