CODEWITHSUNDEEP
javascriptjqueryhtml
programmer-bigwoods
programmer-bigwoods

Reputation: 69

How to set this "slider" to change every 5 seconds

I developed this "slider" in jQuery

HTML:

<div class="col-md-6 pos-rel text-center">
   <div class="slider-meio slider1">    
      <img class="img-responsive" src="http://www.novahidraulica.com.br/imgcategoria/1/2014-09-24-11-09-0420.jpg">
   </div>
</div>
<div class="col-md-6 pos-rel text-center">
   <div class="slider-meio active slider2"> 
      <img class="img-responsive" src="http://www.novahidraulica.com.br/imgcategoria/1/2014-09-24-11-09-0420.jpg">
   </div>
</div>
<div class="col-md-3">
   <ul class="controle-slider">
      <li class="active-slider"><a data-target=".slider1" >LINHA FACE PLANA</a></li>
      <li class=""><a data-target=".slider2" >LINHA COLHEDORA</a></li>
   </ul>
</div>

JS:

 function montaSlider() {
            $(".slider-meio").each(function () {
                if($(this).hasClass("active")){
                   $(this).fadeIn();
                }else {
                    $(this).fadeOut();
                }
            });
        }
        montaSlider();
        $(".controle-slider li a").click(function () {
            $(".controle-slider li a").parent().removeClass("active-slider");
            $(this).parent().addClass("active-slider")
            $(".slider-meio").removeClass("active");
            $($(this).attr("data-target")).addClass("active")
            montaSlider();
        });

i want to change the slide every 5 seconds, but i cant think of how to do it

can anyone help me?

Upvotes: 0

Views: 4162

Answers (2)

4EACH
4EACH

Reputation: 2197

Use the setInterval() function:

var intrvl = setInterval(function(){montaSlider()},5000);

I you need to stop it use:

clearInterval(intrvl);

Upvotes: 2

Roberto Linares
Roberto Linares

Reputation: 2225

You can use the window.setInterval() javascript method to call your montarSlider() every 5 seconds. Example:

var timer = window.seInterval(montarSlider, 5000);

I recommend you to store the variable returned by the setInterval() method so you can later stop it if necessary.

EDIT: Since you also need to rotate the elements with the active class, you can first make a function called slide() to activate the next element before calling the montarSlider() function. Then, instead of set the interval to the montarSlider() function, you set it to the slide() function. Example:

function slide() {
    var currentActive = $(".slider-meio.active");
    var nextActive;
    currentActive.removeClass("active");

    if(currentActive.parent().next().children(".slider-meio").length > 0) {
        nextActive = currentActive.parent().next().children(".slider-meio");
    } else {
        nextActive = $(currentActive.parent().siblings()[0]).children(".slider-meio");
    }
    nextActive.addClass("active");
    montaSlider();
}
var timer = window.seInterval(slide, 5000);

Upvotes: 3

Related Questions