Making autoplay several div in hover state (sort of like carousel)

[nzrink1]

Based on that codepen, currently when the user hover on one of the logo, it will show a description below it.

Now, I would like to add an additional ux. I would like the hover state of the logo autoplay one by one. So, basically it will start hover to the first logo, then after several seconds to the next logo and so on.

I think the logic I need to make is, to set time interval for those div to be in hover state for certain amount of time and keep rotate

Do you guys have any idea on how I can manage this? I think it can be done using jquery but after some searching I don’t find it.

[nzrink1]

I managed to make it autoplay, but one little thing though. How can I add the background color for the current .product-link div?

[jkblair]

Add a CSS class:

.current {
    background-color: #E6DCD0;
}

Now modify your boxActivate function:

  var boxActivate = function(id){
    $boxes.hide().filter('#box' + id).show();
    $links.removeClass('current').filter('#' + id).addClass('current');
  }

And finally, your stopCycle function:

  var stopCycle = function(){
    clearInterval(cycle);
    $('.current').removeClass('current');
  }

That should work.

[nzrink1]

Thank you thank you. It works.

May I know what filter('#box' + id) and filter('#' + id) mean? I mean like what the different between these 2 filter.

[jkblair]

You’re welcome.

tldr;
The only difference between them is that one is looking for id’s starting with the word “box”, and the other is not.
/tldr;

The id is coming in as “link0”, “link1”, or “link2”, according to your example.

$boxes.hide().filter('#box' + id).show();

In this case, filter(‘#box’ + id) is grabbing all the elements in $boxes that match the id: ‘#box’ + id. If id = “link0”, then this will match all elements in $boxes that have an id of “boxlink0”. The hashtag on the front is simply telling the browser to search the id instead of the class or some other feature.

$links.removeClass('current').filter('#' + id).addClass('current');

The filter(‘#’ + id) in this case is doing the same as above, but since we’ve removed the word “box” from after the hashtag, it’s looking for all elements in the $links collection with the id = “link0”.