Adding and removing a class to a list of divs for creating a content slider

Question

I'm creating a very basic content slider in CSS3 however this question is regarding the jQuery part of it. My content structure is as follows:

<div class="slider>
    <div class="container>
        <div class="slides">
            <div class="slide active"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </div>
</div>

These slides have an opacity of 0 however when .active is added to slide, I change the opacity to 1. What I'm trying to accomplish is moving the active class to each div every x seconds.

if($('.slider').length) {
    // Element exists

    var height = $('.slide .col-md-8').outerHeight(),
        slide = $('.slide'),
        wait = 5000;

    $('.slides').css('height', height);

    slide.each(function() {

    });

}

This is all I can come up with. I'm sorry if it's not enough, I'll also apologize if this is very easy to do and I'm just wasting your time. I've got to learn somewhere. I hope I don't get voted down, I'm trying to build up my rep with this awesome community of developers.

Looks like you have a good start. What are you getting stuck on? A suggestion is that you might look into using setInterval() next. — Marc Kline, Apr 25 '14 at 23:15

Chris Brown · Accepted Answer · 2014-04-25T23:40:09.017

2

Threw together an example of a script that applies a class to elements in order over time, and loops. This can be implemented in what you currently have.

var i = 1; // Counter
$slides = $('.slides > .slide'); // Array of slides
$num = $slides.length; // Number of present slides
wait = 5000; // Wait time

setInterval(function() {

    // If reached the last slide - reset to the first slide
    if (i++ == $num) {
        $('.slide').removeClass('active');
        $($slides[0]).addClass('active');
        i = 1;
    }
    else {
        // Add the active class to the next slide
        $('.active').removeClass("active").next().addClass('active');
    }
}, wait); // Time per slide in ms

Fiddle

edited Apr 25 '14 at 23:40

answered Apr 25 '14 at 23:34

Chris Brown

4,445
3
28
36

1

Thanks for commenting everything to help me understand the logic. This helped me achieve my slider. – davidxd33 Apr 25 '14 at 23:48
Would there be a way to pause the cycle on mouse hover? Not a requirement, but just would like to know about it. – davidxd33 Apr 25 '14 at 23:54
You can't directly "pause" `setInterval` but you can stop it, and restart it again. Takes a small change of syntax but [this question](http://stackoverflow.com/questions/7279567/how-do-i-pause-a-windows-setinterval-in-javascript) should help – Chris Brown Apr 25 '14 at 23:56

dklingman · Answer 2 · 2014-04-26T00:17:25.263

If I understand you correctly you just want to move the next slide up in the stack so to speak. This is how I would go about doing it. Working example on jsfiddle

if($('.slider').length) {
    // Element exists

    var height = $('.slide .col-md-8').outerHeight(),
        slides = $('.slides'),
        wait = 2000;

    var slideInterval = setInterval(startSlideInterval, wait);

    $(slides).find('.slide').on({
        mouseover: function(){
            clearInterval(slideInterval);
        },
        mouseout: function(){
            slideInterval = setInterval(startSlideInterval, wait);
        }
    });

    function startSlideInterval() {
        var active = $(slides).find('div.active');
            nextSlide = $(active).next('.slide');
            lastSlide = $(slides).find('div.slide:last');

        $(active).removeClass('active');
        $(lastSlide).after($(active));
        $(nextSlide).addClass('active');
    }
 }

I wasn't able to comment about pausing the timer, but I modified the code I had posted originally and also update the jsfiddle.

Thanks for your answer however, I've already accepted Chris' reply. Thanks for showing me this way too, though! — davidxd33, Apr 25 '14 at 23:58

Adding and removing a class to a list of divs for creating a content slider

2 Answers2