0

I would want to have the below setinterval() to start afresh once the last slide is reached, am having three div and but the slide stops once it reaches the third div, i would want it to start again from the first.

My Html code

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js"></script>
<script src="myjava.js"></script>
</head>
<body>
<div class="container">
<div id="slide1" class="slider1">My first slide goes here</div>
<div id="slide2" class="slider2">My second slide goes here</div>
<div id="slide3" class="slider3">My third slide goes here</div>

And my Java code Below

jQuery(function($){ 

var currentDIV = $("#slide1");
var nextDIV, count = 1;
var myInterval = setInterval(function(){
    currentDIV.hide();
    currentDIV = currentDIV.next();
    currentDIV.show();


}, 2000);

});
0

HTML

<div class="container" id="slider-container">  
    <div id="slide1" class="slider-slide">My first slide goes here</div>
    <div id="slide2" class="slider-slide">My second slide goes here</div>
    <div id="slide3" class="slider-slide">My third slide goes here</div>
</div>

Javascript

( function( $ ){ 

    let firstDIV = currentDIV = $( '#slider-container div' ).first();

    if( firstDIV.length > 0 ){
        setInterval( () => {
            currentDIV = currentDIV.hide().next();

            if( currentDIV.length === 0 )
                currentDIV = firstDIV;

            currentDIV.show();

        }, 2000);
    }

} )(jQuery, undefined);
1
  • This worked as expected @tousignant.christopher the slide loops without ending and that's exactly what i wanted, even though i have to remove the jquery undefined so that i can understand the code better – pandglobal Jun 12 '20 at 2:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.