Search code examples
javascriptjquerycsstwitter-bootstrap-3cube

Make Jquery carousel autostart instead of onclick


So I have a carousel that works- see it here on my jsfiddle, https://jsfiddle.net/L4q2e35g/3/

What I need it do is an auto start and slide instead of onclick function, anyone has a quick code solution to make it work?

<div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                    <div class="grey-bordered" style="height: 300px;">
                        <div id="slideShow" class="slides-wrapper">
                            <section class="slide">
                                Section 1
                            </section>
                            <section class="slide">
                                Section 2
                            </section>
                            <section class="slide">
                                Section 3
                            </section>
                            <section class="slide">
                                Section 4
                            </section>
                            <section class="slide">
                                Section 5
                            </section>
                            <section class="slide">
                                Section 6
                            </section>
                        </div>
                </div>
            </div>
        </div>
    </div>

Solution

  • add a function circle to after the s

    function circle() {
            if (slides[currentSlide + 1]) {
                ++currentSlide;
                step();
            }else{ currentSlide = 0; step() }
        }
    

    then a recursive loop function in the init and call it

     var  loop = function(){
                    setTimeout(function(){ circle(); loop() }, 2000)
            }
     loop(); 
    

    you can see the fiddle https://jsfiddle.net/L4q2e35g/9/